2010-06-02 5 views
2

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

Я хотел бы, чтобы содержимое имело полосу прокрутки.

В: Слишком много, чтобы спросить?

+2

A: Нет ----- --- –

+0

Вы хотите, чтобы заголовок/нижний колонтитул/контент занимали 100%/100% окон браузера и имели с возможностями прокрутки? Если су, я могу отправить пример ... если нет, перефразируйте :) – Zuul

ответ

0

A: Нет

CSS:

#content { 
    height: XXXpx; 
    overflow-y: auto; 
} 
+0

Ах. Вся моя проблема заключалась в том, что я использовал overflow-y: visible; вместо автоматического; –

3

Я не совсем уверен, что это действительно отвечает ли ваш вопрос, но свойство для получения полосы прокрутки, если это необходимо (например, если содержание в контейнере превышает его размер) является

overflow: auto 

есть селективные свойства для горизонтального и вертикальные полосы прокрутки:

overflow-x: auto; 
overflow-y: auto; 

, но они являются частью спецификации CSS 3.0 и поддерживается только ограниченное число браузеров (а именно Firefox> 1.5, Opera и Safari).

+0

Я думал, что это 'переполнение: прокрутка;' – Aren

+0

@Aren 'auto' покажет полосу прокрутки, когда это необходимо; 'scroll' всегда будет показывать полосу прокрутки. –

+0

Ницца, спасибо за разъяснение. +1 для вас хороший сэр. – Aren

1

Если вам нужен только прокручиваемый контент, вы можете иметь фиксированный верхний и нижний колонтитулы. Это единственный способ узнать. Проверить эту ссылку для намеков реализации:

http://www.pmob.co.uk/temp/fixedlayoutexample5.htm

2

Это дает вам фиксированный верхний и нижний колонтитулы высоты 50 пикселей, и область содержимого, которое прокручиваются.

<html> 
<body> 
    <div id="header" style="position:absolute; left:0px; top:0px; height: 50px; overflow:hidden"> 
    </div> 
    <div id="content" style="position:absolute; left:0px; top:50px; bottom:50px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; left:0px; bottom:0px; height:50px; overflow:hidden;"> 
</body> 
</html> 
4

Если верхний и нижний колонтитулы имеют фиксированные высоты:

<style type="text/css"> 
    #header { 
     height: 100px; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     top: 0; 
     background-color: red; 
    } 
    #footer { 
     height: 100px; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     background-color: green; 
    } 
    #content { 
     width: 100%; 
     position: absolute; 
     left: 0; 
     top: 100px; 
     bottom: 100px; 
     overflow: auto; 
     background-color: blue; 
    } 
</style> 

<body> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</body> 
Смежные вопросы