div не полностью расширяется до содержимого

Question

Я не эксперт по css, но у меня заканчиваются идеи, что может спровоцировать это нежелательное поведение. Я хочу использовать div в качестве фона для основного раздела моего сайта. Когда в моем div content есть много контента, div content_wrapper не полностью расширяется. Этот раздел моего HTML

<div class="content_wrapper"> 
    <div class="content"> 
     <h1>Some heading</h1> 
     <p>lot's of text</p> 
    </div> 
<footer> 
    <div id="foot"> 
     <a id="disclaimer" href="disclaimer.html"> disclaimer</a> 
    </div> 
    </footer> 
</div> 

И .css.

.content_wrapper{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 215px; 
    background-color: #EEE; 

} 
.content{ 
    z-index: 5; 
    float:left; 
    margin: 50px 0 50px 20px; 
    width: 75%; 
    padding: 20px; 
    background-color: #FFF; 
    border-left: dashed 1px #CCC; 
    border-top: dashed 1px #CCC; 

    -webkit-border-top-left-radius: 25px; 
    -moz-border-radius-topleft: 25px; 
    border-top-left-radius: 25px; 
} 

Любые идеи, что происходит и почему?

Answer 1

Изменить .content_wrapper этому коду:

.content_wrapper{ 
    width: 100%; 
    height: 100%; 
    margin-top: 215px; 
    background-color: #EEE; 
} 

Вы не должны использовать позицию: абсолютная, чтобы позволить ему расширить его родителю. И, оставляя использование позиции: абсолютным, вы должны использовать margin-top, а не верх.

Answer 2

Тест

.content_wrapper {
ширина: 100%;
высота: 100%;
margin-top: 215px;
background-color: #EEE;
z-index: -999;
позиция: абсолютная;
}

Z-индекс должен его слой на дне.
скажите, пожалуйста, если это не то, что вы ищете или оно не работает

Answer 3

Попробуйте установить обертку содержимого в положение: относительное, а не абсолютное. И избавиться от поплавка на вашем .content.

Либо это, либо положить под ним разделительный поддон.

.content_wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    top: 215px; 
    background-color: #EEE; 
} 

.content { 
    z-index: 5; 
    margin: 50px 0 50px 20px; 
    width: 75%; 
    padding: 20px; 
    background-color: #FFF; 
    border-left: dashed 1px #CCC; 
    border-top: dashed 1px #CCC; 
    -webkit-border-top-left-radius: 25px; 
    -moz-border-radius-topleft: 25px; 
    border-top-left-radius: 25px; 
} 

Answer 4

Проблема здесь является сочетание position: absolute и width/height: 100%.

100% относится к родительскому элементу элемента, который равен body. Таким образом, content_wrapper будет размером с корпус. Но он также позиционируется абсолютно и, следовательно, выведен из потока. Это означает, что размер body не изменяется с размером содержимого. Это, в свою очередь, означает, что content_wrapper не растет, и содержимое видно только из-за переполнения.

Не используйте ширину и высоту, и вы должны быть в порядке.