html页面100%高度,CSS设计网页小技巧 100%的高度

在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。

我对你是不了解的，但我试图弄明白如何让我的布局垂直拉伸到页面的100％高度，这样一个令我沮丧的问题。我想让div结构自动延伸，但是它就是不能自动延伸，现在，为什么他不能这样那？今天我将与你一起分享这个解决方法。

比方说你有如下html代码文档

CSS 100% Height

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

提示：您可以先修改部分代码再运行

同时你有如下css样式文件

CSS Code复制内容到剪贴板

body {

margin: 0;

padding: 0;

}

#content {

background:#EEE;

border-left:1pxsolid#000;

border-right:1pxsolid#000;

padding: 020px020px;

margin:auto;

font: 1.5emarial,verdana,sans-serif;

width:960px;

height: 100%;

}

这就给了你这个示例文件。正如你所看到的，页面的content容器不能自动延伸到页面的整个高度。尽管我们给css样式文件添加了”height:100%”。为什么那？

让我给你另外一种方式来思考HTML，几乎每一个HTML文件都有一组容器彼此包含的。因此，在我们的页面里面，首先我们有一个容器，其次

容器包含在里，最后才是

当我们给

解决此问题，我需要告诉

容器变的大一些儿，同时容器也会出现同样的问题，它应该与一样大。所以为了解决这个问题(让

如果我们修改我们的css文件，如下所示

CSS Code复制内容到剪贴板

html {

min-height: 100%;

_height:100%;

}

body {

margin: 0;

padding: 0;

min-height: 100%;

_height:100%;

}

#content {

background:#EEE;

border-left:1pxsolid#000;

border-right:1pxsolid#000;

padding: 020px020px;

margin:auto;

font: 1.5emarial,verdana,sans-serif;

width:960px;

min-height: 100%;

_height:100%;

}

就是这样，这里是我们现在的最终效果。这个content容器现在已经能自动延伸到整个页面的高度了。