Высота контейнера DIV ограничена окном браузера

ProgramBox

Высота контейнера DIV ограничена окном браузера

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я изучаю CSS, и у меня возникли проблемы с расширением моего #wrapper DIV, чтобы он соответствовал его содержимому.
Я убедился, что все мои контейнеры имеют высоту 100%, min-height, похоже, ничего не делает, но я попробовал это также для #wrapper, html и body. Это как-то связано с относительным или абсолютным позиционированием? Ниже приведен пример того, над чем я работаю, буду признателен за любую помощь.

(Обновлено владельцем 4.21.11)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
    height: 100%;
    clear: both;
}

body {
    margin: 0px;
    padding: 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size: 100%;
    line-height: 1em;
    background-color: #gray;
    background-size: 100%;
    height:100%;
    clear: both;
}

#wrapper {
    margin-right: auto;
    margin-left: auto;
    /*background-color: #FFF;*/
    width: 75%;
    height:100%;
    position: relative;
    clear: both;
}

.screen {
    margin-right: auto;
    margin-left: auto;
    background-color: #3B6AA0;
    width: 75%;
    height:100%;
    filter: alpha(opacity=20);
    /* CSS3 standard*/
    opacity:0.20;
    z-index: -100;
    position: absolute;
    left: 12%;
    right: 12%;
    clear: both;
}

.overlay {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    height:100%;
    z-index: 100;
    position: absolute;
    left: 12%;
    right: 12%;
    padding: 0px;
    clear: both;
}

#textArea {
    height: auto;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
}
</style>

</head>
<body>

    <div id="wrapper">
    <div class="screen"></div>
        <div class="overlay">
            <div id="textArea">
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            </div>
        </div>
    </div> 

</body>
</html>

1. Разместите свой код в вопросе, а не включайте ссылку, которую никто не может просмотреть.

2. Да, извините, я тестировал это, но это явно не работает.

3. отформатируйте свой код, выбрав его, а затем нажав на маленькую {} кнопку..

4. Габи, спасибо за подсказку. Я отредактировал свой оригинальный пост, чтобы придать ему больше смысла, а затем отформатировал его в соответствии с вашим предложением. Теперь намного лучше.

Ответ №1:

Для контейнера div, как правило, лучше оставить свойство height (если вы не хотите ограничить его по определенной причине). Это позволит увеличивать высоту по мере необходимости.

1. Я пробовал это, но в итоге это привело к нарушению работы класса .screen, должен ли я также отредактировать этот класс?

2. Я вижу. Возможно ли также получить фрагмент нашей HTML-разметки? Это может помочь.

3. Донни, я пытался загрузить свой html, но у меня возникли трудности из-за того, что я новичок… Вот ссылка на скриншот того, что я вижу, не идеальный, но более полезный, чем нет. -> i.imgur.com/Dd74i.jpg

4. Да, я действительно не могу многое сказать по экрану, но ваша проблема, скорее всего, связана с абсолютным расположением #wrapper и его дочерних элементов. Возможно, вам на самом деле не нужно использовать позиционирование в этом случае, но я не могу сказать этого наверняка, поскольку я летаю вслепую.

5. Донни, мне пришлось удалить список навигации и ссылки на изображения, но ниже приведена базовая структура страницы: Надеюсь, это поможет. <тело> <идентификатор div= «оболочка»> <класс div=»экран»></div> <класс div=»наложение»> <h1 align=»right» class=»largeH1″> <strong> Тест</strong></h1> <идентификатор div=»MainImage»> <идентификатор div=»mainNav»> <идентификатор ul=»nav»> </ul> </div> <img src=»» /> </div><br /> <идентификатор div=»textArea»> </div> </div> </div> </body>

Ответ №2:

свойство 100% означает, что оно должно поместиться в теле родительского файла.

проверьте это http://cssbeauty.com/skillshare/discussion/30/100-width-and-height /

1. поскольку ширина вашего экрана составляет 75%, любой контент на нем, имеющий 100%, будет соответствовать 75% родительского экрана

2. Итак, я предположил, что если родительский объект имеет высоту 100%, то любые дочерние объекты также будут иметь высоту 100% независимо от ширины. Это неверное предположение?

3. это. Позвольте мне лучше объяснить: если родительский div имеет ширину: 75%, это означает, что он занимает 75% ширины его родительского элемента. Если дочерний div имеет ширину: 100%, его ширина будет равна 100% родительского, то есть такой же, как 75% родительского элемента родительского элемента

4. в основном, это зависит от того, где расположен ваш объект, каковы его родительские элементы и их размер

5. (это, если вы используете процент)

Ответ №3:

Ваша ссылка недоступна, но, похоже, если вы добавите ее overflow:hidden; к своей #wrapper , вы получите желаемый эффект.

Просто имейте в виду, что абсолютное позиционирование удаляет элемент из естественного потока документа, поэтому вам нужно учитывать, как содержимое каждого элемента может переполнять его контейнер.