Исправлен нижний колонтитул, заголовок и динамический контент с помощью css

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

То, что я хочу, очень просто (теоретически). Я хочу полноэкранную веб-страницу с заголовком, который всегда находится наверху и нижний колонтитул, который всегда остается внизу. Содержимое является динамическим. Если он превышает страницу, он должен расти, нажав нижний колонтитул. Я хочу div шириной 980 пикселей в содержимом, которое имеет горизонтальную ориентацию. Я хочу дать этому div другой цвет, что цвет фона. Если содержание - это только одна строка текста, я все равно хочу, чтобы div (цвет фона) составлял 100% комнаты между нижним колонтитулом и заголовком. Я сделал красочный пример:

enter image description here

код у меня до сих пор:

<html> 
<head> 
<style> 
#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
} 
#content { 
    width: 980px; 
    background: yellow; 
} 

</style> 
<head> 

<body> 
<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 
    <div id="content"> 
     content 
    </div> 
    </div> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

Этот код далек от Okey. Прежде всего, он не может поддерживать нижний колонтитул внизу страницы, если содержимое превышает страницу. Во-вторых, я понятия не имею, как включить центрированный div 980px.

источник

2013-11-02 Robert Hamers

Если у вас есть фиксированные верхние и нижние колонтитулы, вы должны смотреть в использовании 'позиции. fixed' для них;) – Terry

@Robert Hamers Ознакомьтесь с моим обновленным ответом с помощью JavaScript. Я считаю, что это то, что вы ищете. – MCSharp

Чтобы сосредоточить контент, используйте margin: 0 auto;. Это установит маржу для верхней и нижней к 0 и автоматическую настройку полей для левого и правого. То, что вы задаете, скорее всего, будет связано с JavaScript. У вас будет либо фиксированный нижний колонтитул, либо нижний колонтитул внизу содержимого.

То, что вы просите, не очень практично. Если у вас много контента, ваш нижний колонтитул будет ниспровергнут. Похоже, вы хотите, чтобы нижний колонтитул был внизу, когда на странице мало контента.

Я написал код, чтобы вы начали. JavaScript обеспечивает эффект, который вы хотите. Раскомментируйте высоту CSS или добавьте большое количество контента в div, а нижний колонтитул будет сдвинут вниз.

<html> 
<head> 
    <style> 
     body, #body, #header, #footer { width: 100%;margin: 0; padding: 0; } 
     #header { height: 100px; background: #7eff02; } 
     #footer { height: 100px; background: #ff5c01; } 
     #content { width: 980px; background: #fcff00; margin: 0 auto; 
      /*height: 3000px;*/ 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script> 

     $(document).ready(function() { 
      var headerHeight = $("#header").height(); 
      var footerHeight = $("#footer").height(); 

      var resizeTimer; 
      $(window).resize(function() { 
       clearTimeout(resizeTimer); 
       resizeTimer = setTimeout(onWindowResize(), 100); 
      }); 

      onWindowResize(); 

      function onWindowResize() { 
       if ($("#content").height() < (window.innerHeight - headerHeight - footerHeight)) { 
        $("#content").css("height", (window.innerHeight - headerHeight - footerHeight)); 
        $("#footer").css({ "position": "fixed", "bottom": "0" }); 
       } 
       else { 
        $("#content").css("height", ""); 
        $("#footer").css({ "position": "", "bottom": "" }); 
       } 
      } 
     }); 
    </script> 
    <head> 

     <body> 
      <div id="container"> 
       <div id="header"></div> 
       <div id="body"> 
        <div id="content"> 
         CONTENT 
        </div> 
       </div> 
       <div id="footer"></div> 
      </div> 
     </body> 
</html>

источник

2013-11-02 23:15:04 MCSharp

Попробуйте это:

body {padding:100px 0;} 
#header, #footer {position:fixed;width:100%;height:100px;} 
#header {top:0;} 
#footer {bottom:0;} 
#container {width:980px;margin:0 auto;}

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

источник

2013-11-02 23:15:23 ravb79

Я также это решение: http://jsfiddle.net/AZE4K/

body { 
 
    padding:0; 
 
    margin:0;  
 
} 
 

 
#header, #footer { 
 
    position: fixed; 
 
    width:100%;  
 
} 
 

 
#header { 
 
    left : 0; 
 
    top : 0; 
 
    background-color:red; 
 
    height:100px; 
 
} 
 

 
#footer { 
 
    left : 0; 
 
    bottom : 0; 
 
    background-color:green; 
 
    height:50px; 
 
} 
 

 
#content { 
 
    background-color : #111111; 
 
    color:#DDDDDD; 
 
    width:95%; 
 
    height : 1500px; 
 
    margin:auto; 
 
    margin-top : 100px; 
 
    margin-bottom: 50px; 
 
}

<div id="header"></div> 
 
<div id="content"> 
 
    <h1>Some text</h1> 
 
</div> 
 
<div id="footer"></div>

источник

2013-11-02 23:19:50 dooxe

Исправлен нижний колонтитул, заголовок и динамический контент с помощью css

ответ

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