div与css组合实现类似窗口效果

Posted 2023-03-19

页面div如下：
<div id="panelDiv" class="panel">
<div id="headDiv" class="head">
<span class="title">标题</span>
<div class="toolbar">
<div id="button3" class="button" title="关闭"> </div>
</div>
</div>
<div id="contentDiv" class="content">
</div>
</div>
css如下：
.panel
border: solid RGB(153,187,232) 1px;
width: 300px;
height: 400px;
top:0px;
left:0px;

.head
width: 100%;
height: 20px;
border-bottom: solid RGB(153,187,232) 1px;
background-color: RGB(217,231,248);

.title
height: 20px;
line-height: 20px;
float: left;
font-size: 10pt;

.toolbar
float: right;

.button
cursor:hand;
float: left;
width:20px;
height:20px;
margin-right: 2px;
background-position:center;
background-repeat: no-repeat;

#button1
background-image:url(img/close.jpg);

.content
height:379px;
background-color:gray;

这样模拟了一个窗口。现在问题是：怎样设置content的height属性使得在panel大小改变的时候自动填充panel中除了head的部分。比如现在panel的height是400px，head的height是20px，head的border-bottom占了1px，content的height是379px。当panel的height变为450px时，content自动变为429px。

参考技术A 我看到你的要求后，第一反应就是用position;
将head定位在顶端，content的高度设为100%
在content中嵌套一层，并指定padding-top的值为head的高度
是否OK？

.panel
border: solid RGB(153,187,232) 1px;
width: 300px;
height: 200px;
top:0px;
left:0px;
position:relative;

.head
width: 100%;
height: 20px;
border-bottom: solid RGB(153,187,232) 1px;
background-color: RGB(217,231,248);
position:absolute;
top:0;left:0;

.content
background-color:gray;
width:100%;
height:100%;

.content .area
padding-top:21px;
background-color:red;

<div id="contentDiv" class="content">
<div class="area">adfadfadf</div>
</div>追问

这样做实际上是不是用content填充了整个panel？让head覆盖在content之上？

追答

是这个意思。
这不是你要的效果吗？
无论panel高度如何变，content的高度总能铺满panel.

参考技术B 。。我不知道你想要什么效果，但是我看你的描述的意思是 想 让外层的容器增加高度的时候 让内容器的content 跟随着自动变高，貌似CSS还没那么智能。
我只知道当外容器你这里是panel，高度设置自适应 height:auto; 然后里面的content 变高，panel才能自适应整高。 参考技术C .content
height:379px;
background-color:gray;

把这个样式改下就可以实现了。
.content
height:100%;
background-color:gray;

测试了下在在Chrome和IE6，8下都正常，IE7因打不开没测试，希望我的回答对你有帮助追问

这样content会向下多出20px，也就是灰色部分会超过panel的底部边界。

本回答被提问者采纳 参考技术D 如果浏览器是ie7以下的可以使用css的expression表达式，可以动态的改变大小，实例如下
#container width: expression((documentElement.clientWidth < 725) ? "725px" : "auto" );
如果是ie8以上的版本那么就只能重写window.resizeto方法
window.resizeto=function()
var width=document.clientWidth;
var height=document.clientHeight;
//通过这两个参数的变化可以动态的得到界面方法缩小的信息从而来动态的改变你所说窗口的大小
第5个回答  2011-09-19 貌似事实证明一切想法都是徒劳的，只能老老实实的自己设了