Плавающий div не будет полностью расширяться

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

Я уже добавил overflow: auto в содержащее div, но он, похоже, не работает. Есть идеи?

<body> 

<div id="header"> 
</div><!--ends header--> 

<div id="navbar"> 
</div><!--ends navbar--> 

<div id="wrapper"> 

    <div id="content"> 

     <div class="post"> 
     <p> Long content tested here</p> 
     </div><!--ends post--> 

    </div><!--ends content--> 

    <div id="sidebar"> 
    </div><!--ends sidebar--> 

    <div id="footer"> 
    </div><!--ends footer--> 

</div><!--ends wrapper--> 

</body>

CSS здесь:

html{ 
    height:100%; 
    background:url(images/green-bamboo2.jpg); 
    background-attachment:fixed; 
} 

body{ 
    height:100%; 
    width:80%; 
    margin: 0 auto; 
    padding:0; 
    background:#FFFFFF; 
} 

#header, #navbar, #content, #sidebar, #footer{ 
    display:block; 
} 

#header{ 
    height:100px; 
} 

#navbar{ 
    height:50px; 
    background:#CCCCCC; 
} 

#wrapper{ 
    min-height:100%; 
    background:#FFFFFF; 
    position:relative; 
    overflow:auto; 
} 

#content{ 
    float:left; 
    width:60%; 
    height:auto; 
    background:#99CC00; 
} 

#sidebar{ 
    float:right; 
    width:40%; 
    height:200px; 
    background:#09F; 
} 

#footer{ 
    clear:both; 
    height:150px; 
    background:#339933; 
    position:absolute; 
    bottom:0; 
    width:100%; 
}

источник

2012-05-10 Harry

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

источник

2012-05-10 21:09:41 Ryan

Работал как очарование. Большое спасибо. – Harry

В вашем css есть проблема.

Вы используете как clear, так и position:absolute на #footer. В результате он не использует свойство clear.

EDIT: См http://jsfiddle.net/WTpAx/1/, чтобы увидеть, что это будет выглядеть, если вы удалите position:absolute из #footer и min-height:100% от #content.

источник

2012-05-10 21:10:13

ясный даже не нужно использовать здесь. div не находятся слева или справа от нижнего колонтитула, который перекрывает содержимое. ему просто нужно изменить свое позиционирование, и он сможет увидеть все его содержание. – Ryan

Нет, использование float удаляет боковую панель и содержимое из потока документа, как следствие, если он просто использует позицию относительно «# footer», она будет заканчиваться прямо рядом с заголовком. –

Кажется, что Пи прав насчет того, чтобы не использовать прозрачность: как на нижнем колонтитуле. Он перемещает его (нижний колонтитул) прямо рядом с заголовком, когда его позиция относительно. Большое спасибо за помощь ребятам! – Harry

Плавающий div не будет полностью расширяться

ответ

Смежные вопросы