我試圖做以下佈局:HTML和CSS + Twitter的引導:全頁面佈局或高度100% - NPX
+-------------------------------------------------+
| Header + search (Twitter navbar) |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content column |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
| Footer |
+-------------------------------------------------+
佈局必須採取一切可用高度&寬度,導航和內容列會佔用所有可用空間,並在溢出時滾動,頁腳應粘到底部。
HTML看起來像現在這樣:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/app.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar">
<!-- navbar content -->
</div>
<div class="row-fluid columns">
<div class="span2 article-tree">
<!-- navigation column -->
</div>
<div class="span10 content-area">
<!-- content column -->
</div>
</div>
<div class="footer">
<!-- footer content -->
</div>
</div>
</body>
</html>
CSS:
body, html, .container-fluid { /// take all available height
height: 100%;
}
.article-tree {
color: #DCE6E5;
background: #2F323B;
}
.content-area {
overflow: auto;
height: 100%; /// explicit height to make scrolling work
}
.columns {
height: 100%; /// columns should take all height
margin-top: 42px; /// minus header
margin-bottom: 20px; // minus footer
}
.columns > div {
height: 100%; // make each column to take all available height
}
.footer {
background: red;
height: 20px;
}
理論上它應該工作,但是我希望columns.margin不起作用。我認爲它應該使高度= 100% - 馬金,但它只是移動容器。
我google了一下,看到了很多關於StackOverflow的問題。所有這些都包括JavaScript或位置:絕對和手動定位。恕我直言,他們比解決方案更黑客,我認爲應該有一些更簡單,更優雅和跨瀏覽器的方式來解決這個問題。
那麼我怎麼做上面描述的佈局?也許Bootstrap可以幫助我(我已經瀏覽過文檔,但沒有提到這種情況)?
好的問題。 –