如何根據同級DIV的和集裝箱

我試圖做一些很簡單的擴大DIV元素，但我不能2天現在就這樣做。如何根據同級DIV的和集裝箱

我有這個簡單的HTML頁面

<!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></title> 
     <style> 
      html, body { 
       margin:0; 
       padding:0; 
       height:100%; 
      }    
      .container 
      { 
       position:relative;  
       height: 100%; 
       overflow: hidden; 
      } 
      .header 
      { 
       height: 180px; 
       width: 100%; 
       background-color: #ccc; 
      } 
      .content 
      { 
       height:100%; 
       width: 100%; 
       background-color: #00f; 
      } 
      .footer 
      { 
       height: 72px; 
       position:absolute; 
       bottom:0; 
       width:100%; 
      }    
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header">Some header</div>   
      <div class="content">Some content...</div> 
      <div class="footer">Some footer</div> 
     </div> 
    </body> 
</html>

正如你看到的，我只希望頁腳放置在屏幕的底部。問題在於中間部分甚至佔據了頁腳空間。當我在.content中刪除高度：100％時，中間div不會展開。

我都採取了很多建議，甚至從這個論壇的建議，但沒有成功。

任何幫助，將不勝感激，

感謝海梅

來源

2013-07-25 jstuardo

我很困惑，你所擁有的，內容僅股利下降到頁腳股利。 http://jsfiddle.net/j93be/ – Keith

不，它不需要，這是不言而喻的頁腳下，您正在使用紅色覆蓋它：如果您使用的顯示器d –

：inline-block的;它不會進入頁腳 – Keith

看看這個jsFiddle看看它是否接近你所需要的。

我改變了你。內容類：

.content { 
    width: 100%; 
    background-color: #00f; 
    position: absolute; 
    top: 180px; /*change according to .header height*/ 
    bottom: 72px; /*change according to .footer height*/ 
}

來源

2013-07-26 08:45:15

如何根據同級DIV的和集裝箱

回答

相關問題