<div id="wrapper" style="height: 600px">
<div id="fixed" style="height: 100px"> </div>
<div id="scrolling" style="height: 500px; overflow: auto"> </div>
</div> 然后我用JS来给那个scrollingDIV给他定高度document.body.onresize = function()
{
document.getElementById("scrolling").style.height=document.body.offsetHeight-36 ;
}
document.getElementById("scrolling").style.height=document.body.offsetHeight-36 ;问:有没有办法不要用这条JS都可以实现现在我加了JS的站scrolling高度随浏览器的大小改变而改变高度谢谢
解决方案 »
- XML文件问题,如何禁止空标签,在文件中生成成对标签
- 求救
- ATGrid报表控件/WEB插件[专业版]
- 奇怪的asp.net 2.0 中新加功能sitmap的问题,报错为'XmlSiteMapProvider'不存在?
- 用户控件中的javascript问题!
- 在.net2003里不能新建项目?
- 如何把excel中的标题字段当作datagrid里的记录绑定在 datagrid里?
- 这个问题看来只有思归大哥才能彻底解决了
- 错误: System.Exception: Exception decrypting. Decryption failed. 该项不适于在指定状态下使用!!!!
- 用过动软代码生成器的来看看
- 在线急等:窗体之间传值的问题。
- 求助啊!关于datalist 编辑出现的一个问题?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:#E7DFD3;
}
#wrap{
width: 750px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #E8E8E8;
}
#sideleft{
width: 580px;
float: left;
background: #FFF;
text-align: left;
}
#sideright{
width: 170px;
float: left;
background: #F0F0F0;
text-align: left;
}
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
#footer{
background: #E8E8E8;
width: 100%;
float: left;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Head</h1>
</div>
<div id="sideleft">
<h2>sideleft</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点,而一个
h3 就是一个字大小的方块。由于字体大小的变化, h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点,而一个
h3 就是一个字大小的方块。由于字体大小的变化, h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p>
</div>
<div id="sideright">
<h2>sideright</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点,而一个
h3 就是一个字大小的方块。由于字体大小的变化, h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p>
</div>
<div id="footer">
<address>
Footer
</address>
<p>制作:<a href="http://www.forest53.com">forestgan</a></p>
</div>
</div>
</body>
</html>
大家改一下下面的DIV的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><title>
无标题页
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGQHyNjWRb+mqCryLeKT4szq+eKeqg==" />
</div> <div style="background: #AA0000; height: 100%;">
要这全占满浏览器
</div>
</form>
</body>
</html>