具有最大高度列的3列布局

时间：2013-06-26 09:36:50

标签： html css twitter-bootstrap

我正在尝试使用以下布局创建页面： desired layout

  • 页面占据整个视口：html, body {height: 100%}
  • #header位于页面顶部height: 80px
  • 实际网页内容（#content）占用所有剩余空间，并分为3列边距

对于我正在使用bootstrap的.row-fluid和span-X个孩子的列。

如果我将position: static用于#header并将height: 100%设置为#content，则页面的高度将超过视口的80px。

如果我使用#header设置position: absolute的位置，并使用#content在height: 80px之前添加一些元素，那么页面将比视口大80px。我试图将边距和填充设置为#content而不是添加空元素，但这没有帮助。

2 个答案:

答案 0 :(得分：1)

将header放在content之前，然后给它width:100%; height:80px; position:absolute;，给予.column{margin-top: 85px;}会做类似于您所寻找的事情。 的 jsfiddle

<html> 

<div id="header"></div>
<div id="content">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

<style> 

#header{
width:100%;
height:80px;    
background:red;
position:absolute;

}

#content{

width:100%;
height:100%;    
background:blue;

}
.column{
margin-top: 85px;
float: left;
position: relative;
width: 20%;
margin-left: 95px;
background: #FF0;
height: 75%;
}

html{height:100%;}
body{height: 100%;
margin: 0;}

答案 1 :(得分：0)

为防止溢出，请尝试将#header和#content放在#container中，并为容器添加height: 100%。

但要从上到下填充整个页面，您可能希望尝试display: flex https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes或.parent { display: table;} .child {display: table-cell;}

相关问题
最新问题