Проблема CSS с нижним колонтитулом страницы - PullRequest
Новая
       11

Проблема CSS с нижним колонтитулом страницы

0 голосов
/ 09 ноября 2009

Я определил нижний колонтитул в файле CSS: 

#footer {
  position: absolute;
  height: 50px;
  text-align: center;
  background: #66CCCC;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 18px;
}

Теперь, если на страницу добавляется больше данных, они перемещаются ниже нижнего колонтитула, и нижний колонтитул остается там, где он есть. Есть ли способ это исправить?

Спасибо.

Ответы [ 4 ]

4 голосов
/ 09 ноября 2009

Не используйте абсолютное позиционирование для нижних колонтитулов, привязывая их к области просмотра (что и делает bottom: 0px).

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

0 голосов
/ 09 ноября 2009

Если вы ищете только CSS, вы можете сделать следующее:

HTML-файл: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="Site.css" runat="server" rev="Stylesheet" type="text/css" />
</head>
<body>
    <div id="Page">
        <div id="Header">
            This is my "Header Content"!
        </div>
        <div id="Content">
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
            This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...          This is my long content...
        </div>
        <div id="footer">
            This is my "Footer Content"!
        </div>      
    </div>
</body>
</html>

CSS (Site.css): 

#Page
{
    background-color: Red;
}

#Header
{
    background-color: Purple;
    color: White;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 75px;
    font-size: xx-large;    
    text-align: center;
}

#Content
{
    background-color: Lime;
    position: absolute;
    top: 75px;
    left: 0px;
    right: 0px;
    bottom: 50px;
    overflow: auto;
}

#footer
{
    position: absolute;
    text-align: center;
    background: #66CCCC;
    height: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Я, конечно, настраивал цвета и положения странным образом, чтобы показать, где встречаются дивы. Когда вы добавляете контент на страницу, добавляете его в область контента, и, поскольку у нас есть overflow: auto; для div контента, он будет прокручиваться, а ваш верхний / нижний колонтитул будет статичным.

Надеюсь, это поможет!

0 голосов
/ 09 ноября 2009

Почему у вас есть 2 определения высоты? Другой способ - установить min-height так, чтобы его высота могла «расти» вместе с содержимым, не превышая определенной высоты. 

#footer {
  .....
  min-height: 18px;
}
0 голосов
/ 09 ноября 2009

Положение использования: исправлено; для этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...