上下两个div，底部的div高度可调，上面div高度自适应，填满整个窗口，页面不出现滚动条 50

上下两个div，下面的div高度可调，上面div高度自适应，以填满整个窗口，页面本身不能出现滚动条，但上面的div可根据其中的内容出现滚动条，整体感觉像一个聊天窗口，求h... 上下两个div，下面的div高度可调，上面div高度自适应，以填满整个窗口，页面本身不能出现滚动条，但上面的div可根据其中的内容出现滚动条，整体感觉像一个聊天窗口，求html5+css代码。展开

 我来答

10个回答

#热议# 为什么有人显老，有人显年轻？

百度网友a2a5975
2015-01-30 · TA获得超过394个赞

知道小有建树答主

回答量：335

采纳率：50%

帮助的人：169万

我也去答题访问个人页

关注

展开全部

第一感觉就是用框架可以实现，http://www.w3school.com.cn/tiy/t.asp?f=html_frame_cols，好处是本身frame边线就可以拖动,根据百分比适应。但是框架是被淘汰的技术，不提倡使用！js+html也可以实现类似框架的效果，但是边框可移动怎么实现是问题，div和整个窗口的数据获取实现很容易！可以变通一下，在线面的div加个增大减小的按钮控件，js实现很简单，时间原因我没写这个功能

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Complitable" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
    </head>
    <body>
        <div id="wrapper">
            <div id="top" style="width:100%;background:red;"></div>
            <div id="bottom" style="width:100%;background:yellow;"></div>
        </div>
        <script>
            var getblank = document.documentElement.clientHeight+"px";
            var topd = document.getElementById("top");
            var bottomd = document.getElementById("bottom");
            var w = document.getElementById("wrapper");
            w.style.height = getblank+"px";
            topd.style.height = 1/2*Number(getblank.split("px")[0])+"px";
            bottomd.style.height = 1/2*Number(getblank.split("px")[0])+"px";
        </script>
    </body>
</html>

已赞过 已踩过<

评论收起

佼安杉0F1
2016-09-28

知道答主

回答量：6

采纳率：0%

帮助的人：2.7万

我也去答题访问个人页

关注

展开全部

只用css，不使用js。IE高版本跟谷歌已测。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0px; padding: 0px;
        }
        div{
            width: 100%;
        }
        .top{
            height: 200px;background-color: greenyellow;
        }
        .bottom{
            position: absolute; top: 200px;bottom: 0px; background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>

阿西吧，对不住啊，看错题目了。我做的题目是上下两个div，上面200px；下面自适应高度。

已赞过 已踩过<

评论收起

谭加巧
2015-01-09 · TA获得超过186个赞

知道小有建树答主

回答量：230

采纳率：79%

帮助的人：100万

我也去答题访问个人页

关注

展开全部

fds

fdsfds

fds

fdsfds

fds

fdsfds

fds

</div>

</body>

追问

上面的div不能指定高度，需要自适应剩余高度。因为下面的div中的内容会发生变化，而导致下面的div高度发生变化，所以上面的div需要自适应剩余高度。
比如，一开始下面的div中有一个三行的table，然后点了一个按钮之后，这个table中增加了一行，那么下面的这个div高度就增加了，而相应的，上面的div需要缩短高度，至于缩短多少，因为很难计算，所以需要自适应的方案。

已赞过 已踩过<

评论收起

六月油D
2015-01-13 · 超过10用户采纳过TA的回答

知道答主

回答量：36

采纳率：100%

帮助的人：19.6万

我也去答题访问个人页

关注

展开全部

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".one").height();
var two = $(".two").height();
var thr = $(document.body).height();
one = thr - two;
$(".one").css('height',one);
alert(one);
});
</script>
<style>
body,html{ height:100%; margin:0}
p { margin:0; padding:0; color:#fff}
.one {width:100%; background-color:#0C0; height:auto; overflow:hidden}
.two { position:fixed; width:100%; height:auto; bottom:0px; left:0px; background-color:#000}
</style>
</head>

<body>
<div class="one">
<p>1111</p>
</div>
<div class="two">
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

百度网友4c672e2
推荐于2017-11-25

知道答主

回答量：1

采纳率：0%

帮助的人：1404

我也去答题访问个人页

关注

展开全部

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

<!DOCTYPE html>
<html>
<head>
<style>
.all{border:2px solid black;height:100%;}
.one{border:2px solid red;}
.two{border:2px solid blue; height:200px;}
</style>
<script language="javascript">
var ss;
window.onload=function()
{
var w=document.documentElement.clientWidth ;//可见区域宽度
var h=document.documentElement.clientHeight;//可见区域高度
ss=document.getElementById('ha');
//alert(w);
h = h-200;
ss.style.height=h+"px";
}
</script>
</head>
<body>
<div class="all">
<div class="one" id="ha">头部</div>

<div class="two">底部</div>
</div>
</body>
</html>
</body>
</html>

不知道你要的是不是这个效果

追问

不能用script来计算高度，因为下面这个div的内容不能确定其高度是多少

追答

那肯定要获得第2个DIV这个节点..通过class ,父节点..等等..得到节点对象,就能动态获得高度了啊..

假设我知道class
var ss;
	window.onload=function()
	{
	var w=document.documentElement.clientWidth ;//可见区域宽度
	var h=document.documentElement.clientHeight;//可见区域高度
	ss=document.getElementById('ha');
	//alert(w);
var two_height = $(".two").css("height");//这里用的是jQuery的函数.引下jQuery工具包
h = h-two_height ;
	ss.style.height=h+"px";
	}

本回答被网友采纳

已赞过 已踩过<

评论收起

更多回答（8）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

上下两个div，底部的div高度可调，上面div高度自适应，填满整个窗口，页面不出现滚动条 50

其他类似问题

为你推荐：