Ребенок DIV превышает родительский DIV - PullRequest
Новая
       22

Ребенок DIV превышает родительский DIV

0 голосов
/ 22 февраля 2012

Если я размещаю Content DIV (высота 100%) после Header, если даже превышает родительские DIV (SuperContainer DIV и Wrapper с высотой 100%).

Я пытаюсь добиться того, чтобы div содержимого был равен 100% (значит, я хочу, чтобы он растягивался до конца страницы), а если текст внутри него переполняется или превышает, я хочу, чтобы Родительские divы будут расширяться соответственно.

Пожалуйста, дайте мне знать решение для этого. Ниже приведен код ... Пожалуйста, помогите. Спасибо.

CSS: 

    * {
    margin: 0;
    }</p>

<pre><code>html, body {
height:100%;
}

#wrapper {
width: 75%;
background-color:#09F;
margin-left:auto;
margin-right:auto;
height:100%;
}

#super_container{
height:100%;
width: 50%;
background-color:#FF0;
margin-left:auto;
margin-right:auto;
}

#content_container{
width: 50%;
background-color:#F00;
margin-left:auto;
margin-right:auto;
height:100%;
}

#header{
height:250px;
}

HTML:

тестирование

Ответы [ 2 ]

1 голос
/ 22 февраля 2012

Почему бы и нет? заголовок имеет высоту 250px, а content_container равен 100%, поэтому значение 100% + 250px превышает 100%.

Как это исправить, зависит от множества факторов.

Если вы хотите, чтобы содержимое уменьшалось по мере увеличения заголовка, вам нужно display:table для super_container и display:table-row для заголовка и содержимого (короче говоря, вам нужна таблица).

Другие решения включают подтягивание контента вверх под заголовком (используя абсолютное позиционирование на заголовке и подходящее расстояние вверху контента). Есть также трюки с отрицательными полями.

Я предлагаю вам найти макет, который делает то, что вы хотите, и основывать свой макет этого.

0 голосов
/ 17 марта 2017

Проверьте, что минимальная ширина применяется к дочернему элементу

...