-1

我正在尝试使用以下布局创建页面： 所需的布局

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

对于列，我将引导程序.row-fluid与span-X孩子一起使用。

如果我使用position: staticfor#header并设置height: 100%为#contentpage 的高度将比视口高 80 像素。

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

4

2 回答 2

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;}
于 2013-06-26T09:41:49.340 回答
0

为防止溢出，请尝试将 the#header和 the都#content放入 a#container并给容器 a height: 100%。

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

于 2013-06-26T09:52:55.770 回答