Home > Article > Web Front-end > div+css页面布局，怎样设定content的高度为100%，而不是具体的像素_html/css_WEB-ITnose
div+css页面布局，怎样设定content的高度为100%，而不是具体的像素_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:311584browse
我搜到一些例子，但是content高度只能用具体像素，如果使用百分比，浏览器里显示的高度就是0了。
应HTML5已经不支持frame，不过csdn论坛也还在用frameset，怎样用div+css代替分帧效果呢？谢谢！
【csdn分帧源码】
【DIV+CSS源码】
回复讨论(解决方案)
js resize 调整
楼下求答案。。。
1楼正解，需要用js的resize
具体用法是：获取页面窗口的高，然后将高的值赋给content，在窗口大小改变时使用窗口函数resize，再次计算窗口的高度赋给content就可以了
1、采用JS实时判断
2、纯CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>html, body { width:100%; height:100%; margin:0; padding:0;}</style></head><body><style type="text/css">#container {margin:0 auto; width:100%;height:100%}#sidebar { float:left; width:200px; height:100%; background:#9c6;}* html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/#content { height:100%; background:#ffa;}</style><div id="container"> <div id="sidebar">This is the sidebar</div> <div id="content">2列左侧固定，右侧自适应宽度，中间无缝型??<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><span style="display:none"> <script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script> </span><br /> <br /> <a href="/layout/29.(l+∽).rar">下载此模板</a></div></div></body></html> 谢谢！目的是为了更符合html5，这么复杂的css各种浏览器的兼容性可能是个问题，还是用table吧，再次感谢！
1楼正解，需要用js的resize
具体用法是：获取页面窗口的高，然后将高的值赋给content，在窗口大小改变时使用窗口函数resize，再次计算窗口的高度赋给content就可以了
谢谢
js resize 调整
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如果浏览器内核为webkit 怎么写只有他能用的css设置_html/css_WEB-ITnoseNext article：div的这个效果是如何做到的_html/css_WEB-ITnose