css+div布局问题
发布网友
发布时间：2022-04-06 12:06
共4个回答
热心网友
时间：2022-04-06 13:35
lz 上面写成300px 下面如果是正常铺满的话 就得用Js 获取body的高度 减去 300px 把得出的值赋值给FOOT 这样是最好的。
要么就只能都用百分比 上面写30% 下面70%
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
#head{background:#396;height:30%;width:100%}
#foot{background:#36C;height:70%;width:100%;}
</style>
<div id='head'>
</div>
<div id='foot'>
</div>
</body>
</html>
lz如果可以用JS 我可以帮你写
热心网友
时间：2022-04-06 14:53
通常必须使用JavaScript：
<html><head>
<meta charset="utf-8">
<script>
function init() {
var div2 = document.getElementById("div2");
div2.style.height=(document.body.clientHeight - 300) + "px";
};
</script>
</head>
<body onload="init()" style="margin:0;padding:0;background-color:blue;width:100%;height:100%;">
<div id="div1" style="background-color:red;width:100%;height:300px;"></div>
<div id="div2" style="background-color:black;"></div>
</div>
</body>
</html>
在支持CSS3的浏览器上，可以使用CSS3的calc函数：
<html><head>
<meta charset="utf-8">
</head>
<body style="margin:0;padding:0;background-color:blue;width:100%;height:100%;">
<div id="div1" style="background-color:red;width:100%;height:300px;"></div>
<div id="div2" style="background-color:black;height:calc(100% - 300px);"></div>
</div>
</body>
</html>
热心网友
时间：2022-04-06 16:28
热心网友
时间：2022-04-06 18:19
