DIV+CSS效果求助，上下两个DIV，要求布满整个浏览器，且整个浏览器不能出现滚动条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS效果求助，上下两个DIV，要求布满整个浏览器，且整个浏览器不能出现滚动条相关的知识，希望对你有一定的参考价值。
上面的DIV的高度随内容高度变化，下面DIV占满剩余区域且放不下时出现滚动条，窗口不能出现滚动条。
这个使用css是达不到具体效果的，这个只能使用js，具体流程就是先获取屏幕的高度，然后获取上面的div高度，经过计算得出下面div的高度，并使用js进行设置。当然了，获取上面div高度要在页面加载完毕之后进行获取，而不是dom元素加载完毕获取。希望帮助到你追问那只能在onload与resize方法中同时写JS实现了，按道理这么简单的需求DIV+CSS可以解决才对啊！？
追答涉及到动态计算的东西都需要js来进行，而css主要是负责样式控制，而他不能控制计算，而你要的是根据不同内容来动态改变下面div的高度，这个css是做不到的
参考技术A <html><head>
<style type="text/css">
*padding: 0;margin: 0;
bodyheight:100%; overflow: hidden;
.he1background-color: blue;
.he2background-color: red;height: 100%;
</style>
</head>
<body>
<div class="he1">
<p>测试测定</p>
</div>
<div class="he2">
</div>
</body>
</html>
缺点：只能显示一屏
div实现可以滚动但不显示滚动条（纯CSS实现）
想要的效果
想实现滚动效果但是又不想显示滚动条，如下面两个图所示：
从下面两个图可以看出，实现了滚动效果，动图弄着有点费劲，就委屈各位通过两个图片的变化看效果吧
实现效果的核心代码
首先有3个div
第1个，固定大小是宽：200，高：200（单位为px，下同）
第2个，不固定大小，其大小要用第3个div把个撑开，但是这个div必需要有滚动条
第3个，固定大小与第1个div保持一致宽：200，高：200
<div style="width: 200px;height: 200px; position: relative;overflow: hidden;">
<div id="abc" style="overflow-x: hidden;overflow-y: scroll;position: absolute;">
<div style="width: 200px;height: 200px;">
<br>
</div>
</div>
</div>
参考
参考链接：https://www.cnblogs.com/dinghaoran/p/11322455.html
以上是关于DIV+CSS效果求助，上下两个DIV，要求布满整个浏览器，且整个浏览器不能出现滚动条的主要内容，如果未能解决你的问题，请参考以下文章