2012-12-04 5 views
1

Я просто хочу, чтобы все в «обертке» растягивалось, чтобы соответствовать оболочке, но все раздражает и остается фиксированной высотой?Divs не будет работать

Так что я хотел, чтобы «боковая панель» и «внутри» области содержимого были одинаковой высотой все время, и я также хочу, чтобы «контент» растягивался, чтобы соответствовать «обертке» вообще время, имея «заголовок», «навигатор» и «нижний колонтитул». но я ничего не пытаюсь работать. У меня было это в какой-то момент, но я потерял код и забыл, что я сделал .. помочь? : c

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

OKAY. , чтобы указать: во-первых, я хочу, чтобы «обертка» инкапсулировала все внутри себя и всегда увеличивала свою высоту, когда один из детей увеличивал их высоту, например, «внутри» div заполняется текстом и увеличивает высоту 'content' Кроме того,, я также хочу, чтобы «боковая панель» и «внутри» сохраняли ту же высоту, а также почему они имеют высоту 100% или верхнюю; 0 нижний; 0 w/e я имею здесь.

Html:

#wrapper { 
 
    width: 1000px; 
 
    min-height: 300px; 
 
    background-color: red; 
 
    position: relative; 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    border: 1px solid black; 
 
} 
 
#header { 
 
    width: 100%; 
 
    background-color: blue; 
 
    height: 100px; 
 
    float: left; 
 
    clear: both; 
 
    position: relative; 
 
    border-bottom: 1px solid black; 
 
} 
 
#content { 
 
    width: 100%; 
 
    background-color: grey; 
 
    height: 100%; 
 
    float: left; 
 
    clear: both; 
 
    position: relative; 
 
} 
 
#sidebar { 
 
    width: 180px; 
 
    background-color: green; 
 
    float: left; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    padding: 10px; 
 
    border-right: 1px solid black; 
 
} 
 
#inside { 
 
    width: 779px; 
 
    padding: 10px; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: orange; 
 
    float: right; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 100px; 
 
    float: left; 
 
    clear: both; 
 
    background-color: pink; 
 
    border-top: 1px solid black; 
 
} 
 
#nav { 
 
    width: 100%; 
 
    border-bottom: 1px solid black; 
 
    float: left; 
 
    clear: both; 
 
    height: 20px; 
 
    background-color: purple; 
 
}
<div id="wrapper"> 
 

 
    <div id="header"> 
 
    hi 
 
    </div> 
 

 
    <div id="nav"> 
 
    hi 
 
    </div> 
 

 
    <div id="content"> 
 

 
    <div id="sidebar"> 
 
     sidebar stuff 
 
    </div> 
 

 
    <div id="inside"> 
 
     inside stuff 
 
    </div> 
 

 
    </div> 
 

 
    <div id="footer"> 
 
    hi 
 
    </div> 
 

 
</div>

+0

"но все являются раздражающими и останавливающиеся фиксированную высоту ??" Это смешно –

+0

Вам нужно задать вопрос, чтобы получить какой-либо ответ. – Fraser

+0

i am tho, я хочу знать, как заставить обертку увеличивать свою высоту всякий раз, когда содержимое или что-то внутри него увеличивает его высоту. Я просто хочу, чтобы содержимое заполнило обертку, а для боковой панели и внутри всегда была одинаковая высота. – user1874212

ответ

0

Если я понимаю, что вы ищете же высоты столбцов.

Проверить эти две ссылки:

http://css-tricks.com/fluid-width-equal-height-columns/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

+0

awh спасибо c: но я понял, что я просто установил положение обертки и изменил еще несколько вещей и он работает так, как я хочу, чтобы ~~ спасибо всем hgjkdfs – user1874212

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