CSS нижний колонтитул в теории

Я знаю, что есть 1001 нижний колонтитул CSS, требующий множественных искажений, чтобы удовлетворить даже самый старый браузер.CSS нижний колонтитул в теории

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

<?xml version="1.0" encoding="UTF-8" ?> 
<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Footer Test</title> 
    <style type="text/css"> 
     html 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     body 
     { 
      height: 100%; 
      min-height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #page 
     { 
      position: relative; /* <--- relative position for footer's parent */ 
      height: 100%; 
      background-color: #AAA; 
     } 
     #header 
     { 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #F00; 
     } 
     #content 
     { 
      margin: 0; 
      padding: 1em; 
      background-color: #0F0; 
     } 
     #footer 
     { 
      position: relative; 
      bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */ 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #00F; 
     } 
    </style> 
</head> 
<body> 
    <div id="page"> 
     <div id="header"> 
      <p>This is the header!</p> 
     </div> 
     <div id="content"> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
     </div> 
     <div id="footer"> 
      <p>This is the footer!</p> 
     </div> 
    </div> 
</body> 
</html>

Edit:

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

источник

2013-07-05 thofou76

#footer 
     { 
      position: fixed; 
      width:100%; 
      bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */ 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #00F; 
     }

источник

2013-07-05 10:46:46 Gangadhar

К сожалению, больше содержания не нажмет этот стационарный колонтитул вниз. – thofou76

позиция: фиксированная всегда будет позиционировать относительно экрана, поэтому она будет располагаться в нижней части экрана независимо от содержания – Gangadhar

Да, но это не тот нижний колонтитул, который я хочу достичь. Я уточнил свой вопрос, чтобы уточнить. – thofou76

Я до сих пор не знаю, почему оригинальная версия не работает ...

Но следующий код хак-бесплатно и, кажется, работает:

<?xml version="1.0" encoding="UTF-8" ?> 
<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Footer Test</title> 
    <style type="text/css"> 
     html 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     body 
     { 
      margin: 0; 
      padding: 0; 
     } 

     #page 
     { 
      min-height: 100%; 
      width: 100%; 
      position: absolute; 
      background-color: #AAA; 
     } 

     #header 
     { 
      padding: 1em; 
      background-color: #F00; 
     } 

     #content 
     { 
      margin-bottom: 5em; /* <--- footer's height */ 
      padding: 1em; 
      background-color: #0F0; 
     } 

     #footer 
     { 
      width: 100%; 
      position: absolute; 
      bottom: 0; 
      background-color: #00F; 
     } 

     #footer > * 
     { 
      padding: 1em; /* <--- additional rule for footer's content */ 
     } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { $("button").click(function() { $("#hidden").slideToggle(1000); }) }); 
    </script> 
</head> 
<body> 
    <div id="page"> 
     <div id="header"> 
      <p>This is the header!</p> 
     </div> 
     <div id="content"> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <button>Push the footer!</button> 
      <div id="hidden" style="display: none"> 
       <p>Begin of extra content</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>End of extra content</p> 
      </div> 
     </div> 
     <div id="footer"> 
      <p>This is the footer!</p> 
     </div> 
    </div> 
</body> 
</html>

Я не нравится об этом:

Содержание должно знать высоту нижнего колонтитула.
Дополнительное правило, необходимое для содержания нижнего колонтитула.

источник

2013-07-05 19:55:50 thofou76

здесь вы можете найти некоторый код следующим

Добавьте следующие строки CSS в таблице стилей. Отрицательное значение для поля в .wrapper такое же, как высота .footer и .push. Отрицательная маржа должна всегда соответствовать полной высоте нижнего колонтитула (включая любые дополнения или границы, которые вы можете добавить).

В CSS:

* { 
margin: 0; 
} 
    html,body 
    { 
     height: 100%; 
     } 
     .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -4em; 
     } 
     .footer, .push { 
     height: 4em; 
     }

Выполните эту HTML структуру. Контент не может находиться за пределами тегов .wrapper и .footer div, если он не находится абсолютно с CSS. Также не должно быть содержимого внутри div .push, поскольку это скрытый элемент, который «толкает» нижний колонтитул, чтобы он не перекрывал ничего.

В HTML Теле:

<div class="wrapper"> 
      <p>Your website content here.</p> 

     <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2013</p> 
     </div>

источник

2013-07-08 10:53:39

Что-то не хватает в разделе CSS наверху – Gangadhar

ответ

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