61,112
社区成员
发帖
与我相关
我的任务
分享满分送上，求div(dom)自适应父元素高度。
直接上代码，意思很明确，求大神。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS模拟框架布局（自适应）</title>
<style type="text/css" media="all">
*
{
margin: 0;
padding: 0;
font-size: 100%;
}
html, body
{
height: 100%;
}
html
{
background-color: #000;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 48px 0 52px 0;
overflow: hidden;
}
body
{
color: #333;
font: 12px/1.5 verdana;
}
li
{
list-style: none;
list-style-type: none;
}
.header, .footer, .wrapper
{
position: relative;
}
.header, .footer
{
z-index: 2;
background-color: #369;
}
.header
{
height: 48px;
margin-top: -48px;
}
.footer
{
height: 52px;
}
.wrapper
{
z-index: 1;
height: 100%;
padding-left: 200px;
background-color: #CEEDFC;
}
.wrapper div.leftbar, .wrapper div.rightbar
{
display: inline;
float: left;
height: 100%;
overflow: hidden;
}
.wrapper div.leftbar
{
width: 200px;
margin-left: -200px;
}
.wrapper div.rightbar
{
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<div style="height:48px;line-height:48px">222222222222222222222222222222222222222222222222222222222</div>
</div>
<div class="wrapper">
<div class="leftbar">
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div>这里可以填写多个td用来测试下面的DIv是否自动适高</div>
<div style="background-color:#FFCC00;overflow:auto;height:100%;">
<p>目前就是不能自动适应应有的高度。求大神啊</p>
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
使这里的div能自动适应leftbar的宽高度，并且超出高度就在此Div中出滚动条
<br /><br /><br /><br />
</div>
</div>
<div class="rightbar">
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#D65C00">
<tr>
<td>rightbar</td>
</tr>
</table>
<div style="width:60px; height:1000px; background-color:#FFCC00;">rightbar</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
未知数 2014-04-28
- 打赏
- 举报
.wrapper div.leftbar, .wrapper div.rightbar
{
display: inline;
float: left;
height: 100%;
overflow: hidden;
}
把这儿的overflow:hidden改为overflow:auto就行了
whatisma 2014-04-28
- 打赏
- 举报
你是想<div style="background-color:#FFCC00;overflow:auto;height:100%;">这个div高度充满leftbar是吧？
如果这样的话可以设置:
leftbar增加样式：position:relative;
<div style="background-color:#FFCC00;overflow:auto;height:100%;">改成
<div style="background-color:#FFCC00;overflow:auto;height:100%;position:absolute;top:0;left:0;">
zhishiheng 2014-04-28
- 打赏
- 举报
已然出现滚动条了 有图有真相
