CSS佈局（div高度）

我想我的問題會很簡單，但我無法弄清楚我的樣式表有什麼問題。CSS佈局（div高度）

我想設計我的網站佈局如下。

http://i.imgur.com/3K33P8O.jpg

我可以通過這個實現它。

CSS

#wrapper { 
    width: 800px; 
    background-color: White; 
    margin: 0 auto; 
    background-color: White; 
} 
#header { 
    width: 100%; 
    height: 100px; 
    background-color: Blue; 
} 
#global_nav { 
    width: 100%; 
    height: 40px; 
    background-color: Orange; 
} 
#content { 
    width: 100%; 
    height: 300px; 
} 
#local_nav { 
    width: 200px; 
    height: 300px; 
    float: left; 
    background-color: green; 
} 
#main { 
    width: 580px; 
    height: 100%; 
    height: 300px; 
    float: right; 
    background-color: lime; 
} 
#footer { 
    background-color: Gray; 
    width: 100%; 
    height: 80px; 
}

HTML

<html> 
<head> 
    <title>test</title> 
    <link rel="stylesheet" type="text/css" href="test.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
      Header 
     </div> 

     <div id="global_nav"> 
      Navigation Bar 
     </div> 

     <div id="content"> 
      <div id="local_nav"> 
       Side Bar 
      </div> 
      <div id="main"> 
       Main Content 
      </div> 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </div> 
</body> 
</html>

然而，正如我的網站是動態的，在主要內容的信息又是從何而來的數據庫，以便高度必須是動態的一樣。我試圖刪除「height：300px;」在內容或主要，但我沒有保持相同的設計。代碼有什麼問題？

感謝您的幫助。

來源

2013-08-24 pk028382

像這樣

DEMO

CSS

html,body{ 
    height:100%; 
    } 
    #content { 
     width: 100%; 
     height: 100%; 
     display:table; 
    } 
    .local_nav { 
     width: 200px; 
     display:table; 
     float: left; 
     background-color: green; 
     height:100%; 
    } 
    .main { 
     width: 580px; 
     float: right; 
     background-color: lime; 

     height:100%; 
    }

HTML

<div id="wrapper"> 
    <div id="header"> Header </div> 
    <div id="global_nav"> Navigation Bar </div> 
    <div id="content"> 
    <div class="local_nav"> Side Bar<br/> 
     Side Bar<br/> 
     Side Bar<br/> 
     Side Bar<br/> 
     Side Bar<br/> 
     Side Bar<br/> 
     Side Bar<br/> 
    </div> 
    <div class="main"> Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
     Main Content<br/> 
    </div> 
    </div> 
    <div id="footer"> Footer </div> 
</div>

來源

2013-08-24 08:10:02 falguni

THX！它工作得很好！ – pk028382

@ pk028382歡迎你 – falguni

你必須使用：

height:auto; 
overflow:hidden;

在#main所以根據內容和側欄調整其高度，我認爲你需要使用人造列。

來源

2013-08-24 08:02:31

試試這個

CSS

html, body { 
    height: 100%; 
    margin:0px; 
} 
#wrapper { 
    width: 800px; 
    height:100%; 
    margin: 0 auto; 
    background-color: White; 
} 
#header { 
    width: 100%; 
    height: 100px; 
    background-color: Blue; 
} 
#global_nav { 
    width: 100%; 
    height: 40px; 
    background-color: Orange; 
} 
#content { 
    width: 100%; 
    height: calc(100% - 220px); 
    height: -webkit-calc(100% - 220px); 
    height: -moz-calc(100% - 220px); 
    height: -ms-calc(100% - 220px); 
    height: -o-calc(100% - 220px); 
} 
#local_nav { 
    width: 200px; 
    height: 100%; 
    float: left; 
    background-color: green; 
} 
#main { 
    width: 580px; 
    height: 100%; 
    height: 100%; 
    float: right; 
    background-color: lime; 
} 
#footer { 
    background-color: Gray; 
    width: 100%; 
    height: 80px; 
}

現場演示：http://jsfiddle.net/nandhakumarsri9/zAcAr/

來源

2013-08-24 09:33:02 Nandhakumar

CSS佈局（div高度）

回答

相關問題