在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法。今天,我将于你分享一下。
我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题。我想让div结构自动延伸,但是它就是不能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法。
比方说你有如下html代码文档
提示:您可以先修改部分代码再运行
同时你有如下css样式文件
CSS Code复制内容到剪贴板
body {
margin: 0;
padding: 0;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
height: 100%;
}
这就给了你这个示例文件。正如你所看到的,页面的content容器不能自动延伸到页面的整个高度。尽管我们给css样式文件添加了”height:100%”。为什么那?
新闻热点
疑难解答