Еще один вопрос высоты div - PullRequest
Новая
       6

Еще один вопрос высоты div

2 голосов
/ 03 июня 2010

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

Я бы хотел, чтобы у контента была полоса прокрутки.

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

Ответы [ 5 ]

4 голосов
/ 03 июня 2010

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

<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>
3 голосов
/ 03 июня 2010

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

overflow: auto

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

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

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

2 голосов
/ 03 июня 2010

Это дает вам фиксированный верхний и нижний колонтитулы высотой 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>
1 голос
/ 03 июня 2010

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

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

0 голосов
/ 03 июня 2010

A: Нет.

CSS: 

#content {
  height: XXXpx;
  overflow-y: auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...