css-макет с заголовком, нижним колонтитулом и несколькими столбцами прокручивается

Я пытаюсь создать шаблон макета веб-страницы, целью которой является заголовок, нижний колонтитул и столбец между двумя столбцами, которые дают мне самую большую головную боль, я хочу, чтобы левая столбец фиксированной ширины и правый столбец для заполнения оставшейся области, я также успешно завершил это. Но я также хочу, чтобы оба столбца также заполняли пространство дождя вертикально и когда контент заполняется больше, чем пространство, которое я просматриваю, каждый столбец, который нужно ругать отдельно, а не использовать обычную полосу прокрутки Браузераcss-макет с заголовком, нижним колонтитулом и несколькими столбцами прокручивается

Мой текущий html-код такой же, как и следует

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="./style/default/style.css" /> 
</head> 
<body> 
    <div class="container"> 
    <div class="header"> 
    HEADER 
    </div> 
    <div class="content"> 
     <div class="content-contain"> 
     <div id="content-col1"> 
     COLUMN 1 
     </div> 
     <div id="content-col2"> 
     COLUMN 2 
     </div> 
     </div> 
    </div> 
    </div> 
<div class="footer"> 
    FOOTER 
</div> 
</body> 
</html>

CSS

* { 
    margin: auto; 
} 

html, body { 
    height: 99%; 
    background-color: #FFFFFF; 
    font-family:sans-serif; 
} 

.container { 
    min-height: 100%; 
    height: auto !important; 
    height: 99%; 
    margin: 0 auto -1em; 
} 

.header { 
    color:#FFFFFF; 
    background-color:blue; 
    border-bottom:3px solid blue; 
} 

div#content-col1{ 
    float:left; 
    width:220px; 
    padding:3px; 
    display:block; 
    padding-left:5px; 
    overflow-y: auto; 
    background-color: red; 
} 

div#content-col2{ 
    margin-left: 230px; 
    margin-bottom:40px; 
    padding: 3px; 
    overflow-y: auto; 
    background-color: green; 
} 

.footer { 
    background-color:yellow; 
    clear:both; 
}

Если кто-то лучше или знать, что я могу сделать, чтобы сделать эту работу успешен LY, пожалуйста, дайте мне знать

Vip32

источник

2013-02-15 vip32

http://jsfiddle.net/ERWES/ – ashley

Чтобы заполнить всю ширину с двумя столбцами, где один имеет фиксированный с, пожалуйста, обратитесь к this question.

Вертикальная начинка немного отличается. По умолчанию элементы и block имеют динамическую высоту. Поскольку body также динамичен, вы должны установить его высоту, чтобы сделать контент полностью вертикальным.

body, div#container, ... { height: 100%; }

Некоторые люди считают, что лучше применить высоту к html элемента а. У меня есть сомнения, потому что этот тег не виден.

Если у вас есть элемент, который требует некоторой высоты, например, как верхний или нижний колонтитул, обратитесь к the same solution for fixed width's, но примените его на высоте.

источник

2013-02-15 12:31:07

, который, кажется, попадает туда, но у меня все еще возникают проблемы, так как он принимает 100% всего размера окна не только 100% пространства между верхним и нижним колонтитулом , – vip32

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

css-макет с заголовком, нижним колонтитулом и несколькими столбцами прокручивается

ответ

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