我在设计网页的时候才用三栏式(页首、主体内容、页尾)。网页的高度为未知数,随着主体内容的多少有可能没有上下滑动条。但要求在网页主体内容最少的时候整个网页也能充满这个浏览器,如下情况,页面content的div就无法充满整个浏览器,而是由于内容较少,聚集到浏览器的上面,实现不了,页尾在浏览器的尾部。
<body style=" background-color:Blue;">
<form id="form1" runat="server">
<div id="content">
<div>
<uc1:Header ID="Header1" runat="server" />
</div>
<div>主体内容</div>
<div>
<uc2:Footer ID="Footer1" runat="server" />
</div>
</div>
</form>
</body>
body style=" background-color:Blue;">
<form id="form1" runat="server">
<div id="content" runat="server">
<div id="header" runat="server">
<uc1:Header ID="Header1" runat="server" />
</div>
<div id="realContent" runat="server">主体内容</div>
<div id="footer" runat="server">
<uc2:Footer ID="Footer1" runat="server" />
</div>
</div>
</form>
</body>
要求其中控件header1和footer1的高度是固定的了,由控件自身的高度决定,因此id为header和footer的div的高度就固定了。唯一变化的就是包含主体内容的id为realContent的div的高度,当realContent中内容很少的情况下,该div的高度就会很小,导致id为content的div无法站面整个浏览器窗口。
因此问题是如何在id为realContent的div内容很少的时候content的div仍能站慢整个窗口。
可是你并不知道别人用的显示器的分辨率啊。固定了宽度,就有可能在不同的分辨率下出现问题。
方法和详细的操作步骤如下:
1、第一步,创建或打开Web项目,新建html文件以及CSS文件,见下图,转到下面的步骤。
2、第二步,执行完上面的操作之后,图中显示了HTML页面代码,定义div并给出id属性等级,见下图,转到下面的步骤。
3、第三步,执行完上面的操作之后,将“height”值设置为零,使用“padding”属性的“top”或“bottom”,同时运用背景色来进行测试,见下图,转到下面的步骤。
4、第四步,执行完上面的操作之后,效果如下,如果进行放大或进行缩小,则宽度和高度将进行相应的更改,见下图。这样,就解决了这个问题了。
不过直接设置高度为100%对于大多数浏览器无效.一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.
IE中认为父级对象为body
FF等标准浏览器认为为HTML
html,body{
margin:0px;
height:100%;
}
#high{
background-color:#CCCCCC;
border:2px solid #f00;
width:300px;
height:100%;
}本回答被提问者采纳
#content{margin:100px auto}