CSS Wrapper не расширяется при использовании «верхнего» позиционирования

Question

Я пытаюсь развернуть оболочку с помощью div div, он отлично работает, пока я не добавлю верхнее позиционирование в контентный div, после чего содержимое div переполняется из обертки

Я попытался переполнить auto на обертке, которая, похоже, работает, но добавляет нежелательные полосы прокрутки, а скрытые просто зажимают конец содержимого div ..... там все равно, чтобы обертка автоматически расширялась при использовании метода TOP-позиционирования, может быть, мне нужно добавить прокладку на дно обертки для компенсации? - хотя я хотел бы использовать ту же оболочку, идентификатор на нескольких страницах с различным содержанием высоты

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #FC0; 
 
} 
 
#content { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    top: 200px; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    background-color: #F60; 
 
}

<div id="wrapper"> 
 

 
    <div id="content"> 
 
    Content... 
 
    </div> 
 

 
</div>

Answer 1

Это связано с положением относительно. Подумайте о позиции как о «замораживании» границ элемента. Если вы измените позицию, она не изменит исходную ограничительную рамку, а изменит ее отображение на экране. Таким образом, ваша оболочка все еще думает, что дочерний элемент имеет высоту 300 пикселей, верхний 200px не регистрируется как высота.

Самое простое исправление - добавить верхний край, а не использовать верх.

margin: 200px auto 0;