怎样让Div高度自适应浏览器？

idiot_fox 2016-01-26 05:17:03

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <link type="text/css"  href="index.css" rel="stylesheet" />

    <title>Layout Test</title>

</head>

<body>

 <div class="Left"></div>

 <div class="Heading"></div>

 <div class="Right">

     <div class="Content"></div>

     <div class="Content"></div>

     <div class="Content"></div>

     <div class="Content"></div>

     <div class="Content"></div>

 </div>



</body>

</html

body{

    background-color: gold;

    margin: 0 0 0 0px;

}

.Left{

    width: 200px;

    height: 100%;

    background-color: blueviolet;

    position: fixed;

    left: 0px;

    top: 0px;

    z-index: 1;

}

.Heading{

    width: 100%;

    height: 100px;

    background-color: blue;

    position: fixed;

    left: 200px;

    top: 0px;

    z-index: 0;

}

.Content{

    width: 100%;

    height: 200px;

    margin-bottom: 50px;

    background-color: aqua;

}

.Right{

    width: 100%;

    max-height: 630px;

    position: relative;

    top: 100px;

    z-index: -1;

    overflow-y: scroll;

}

怎样让Right的高度自适应浏览器（像Left一样）？无论content有多少全靠overflow来解决，只显示Right的滚动条。

...全文

324 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

书香卷气 2016-01-28

打赏
举报

可以用高度百分比

wylwyl1108 2016-01-28

打赏
举报

高度用百分比，然后position:absolute 或者fixed

idiot_fox 2016-01-27

打赏
举报

引用 6 楼 fjfjfj 的回复:

你那代码的right不能滚动的原因，是.right{ z-index: -1; } 给藏到底下去了，把这个去了就行你想要的效果，是上面head固定屏幕。左边left要固定屏幕。右边right作为容器，填充剩下的空间，可以容纳纵向滚动条。不过一般不这么布局页面。用fixed固定顶部和左部。那么数值固定了，右侧也可以fixed，让出左边和上边的宽高。不要max-height定高度。每个人的机子不一样。你机子的浏览器合适，这个max-height对我来说，可能就大了或者小了。 fixed是在一些有特殊要求的地方用的。一般网页布局，最好还是让它自由堆放，高度靠里面的内容撑起来。

原来如此。（我懂了）不过，我刚才试过把html，body这部分css代码去掉，也可以让滚动条有效，然而content内容在firefox中不显示（IE中能显示）。

fjfjfj 2016-01-27

打赏
举报

你那代码的right不能滚动的原因，是.right{ z-index: -1; } 给藏到底下去了，把这个去了就行你想要的效果，是上面head固定屏幕。左边left要固定屏幕。右边right作为容器，填充剩下的空间，可以容纳纵向滚动条。不过一般不这么布局页面。用fixed固定顶部和左部。那么数值固定了，右侧也可以fixed，让出左边和上边的宽高。不要max-height定高度。每个人的机子不一样。你机子的浏览器合适，这个max-height对我来说，可能就大了或者小了。 fixed是在一些有特殊要求的地方用的。一般网页布局，最好还是让它自由堆放，高度靠里面的内容撑起来。

idiot_fox 2016-01-27

打赏
举报

引用 1 楼 fjfjfj 的回复:

这颜色我感觉我眼睛已经瞎了


<style type="text/css">
html,body{width:100%;height:100%;}
body{background:gold;margin:0 0 0 0px;}
.heading{position:fixed;background:blue;left:200px;top:0;right:0;height:100px;}
.left{position:fixed;background:blueviolet;left:0;top:0;bottom:0;width:200px;}
.right{position:fixed;left:200px;top:100px;right:0;bottom:0;overflow-y:scroll;}
.content{position:relative;box-sizing:border-box;width:100%;height:200px;margin-bottom:50px;background:aqua;}
</style>
 <div class="left"></div>
 <div class="heading"></div>
 <div class="right">
     <div class="content">111</div>
     <div class="content">222</div>
     <div class="content">333</div>
     <div class="content">444</div>
     <div class="content">555</div>
 </div>

非常感谢（原谅我初学没注意配色），我想要的效果就是这样，可是不知道为什么Right的滚动条用不了（滑不动）。请问有什么解决的办法吗？

idiot_fox 2016-01-27

打赏
举报

引用 2 楼 wanglei19880622 的回复:

把.Right 中的max-height去掉就可以了吧

不行，还是会出现浏览器的滚动条。

香蕉猪 2016-01-27

打赏
举报

高度自适应浏览器？？？那就把right的高度设置成100%，，，它的父级也是100%，，，body,html也是100%，，，就可以了。。。

小小农民 2016-01-27

打赏
举报

把.Right 中的max-height去掉就可以了吧

fjfjfj 2016-01-27

打赏
举报

这颜色我感觉我眼睛已经瞎了


<style type="text/css">
html,body{width:100%;height:100%;}
body{background:gold;margin:0 0 0 0px;}
.heading{position:fixed;background:blue;left:200px;top:0;right:0;height:100px;}
.left{position:fixed;background:blueviolet;left:0;top:0;bottom:0;width:200px;}
.right{position:fixed;left:200px;top:100px;right:0;bottom:0;overflow-y:scroll;}
.content{position:relative;box-sizing:border-box;width:100%;height:200px;margin-bottom:50px;background:aqua;}
</style>
 <div class="left"></div>
 <div class="heading"></div>
 <div class="right">
     <div class="content">111</div>
     <div class="content">222</div>
     <div class="content">333</div>
     <div class="content">444</div>
     <div class="content">555</div>
 </div>