有下面这样的一个DIV+CSS布局,要求如下:
整个页面充满窗口,当窗口缩小放大时自动调整,不能出现窗口的滚动条,但小于定义的最小宽高时可以出现。
头部(1)固定高度40px,宽度自适应窗口宽度。
左侧(2)固定宽度150px,高度为窗口高度减去头部的40px,不是固定值。
右侧(4)与左侧(2)一样。
中间(3)宽高都是不固定的,宽是窗口宽度减去左右两侧,共减去300px,高度是窗口高度减去头部(1)跟底部(5),共减去100px。
底部(5)是中间(3)的附属部分,高度固定60px。
最后加个小小附加题,在中间(3)里加个input文本框,上左右边距始终10px,宽度不固定,随着中间(3)宽度的变化而变化。
不能使用javascript,只能用css,不考虑IE6。
具体的实现代码为:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html,body{margin: 0;padding: 0;background: yellow;height: 100%;}
.top{height: 40px;width: 100%;background: red;}
.content{height: 100%;background: green;position: relative;}
.left{width: 150px;position:absolute;top:0;left:0;height: 100%;background: #4169e1;}
.right{width:150px;position:absolute;right:0px;top:0;background: #9acd32;}
.main{height: 100%;margin-left: 150px;margin-right: 150px;background: #8a2be2;position:relative}
.b{position:absolute;bottom:0px;left:0;height: 60px;width: 100%;background: yellow;}
.a{}
</style>
</head><body>
<div class="top"></div>
<div class="content">
<div class="left"></div>
<div class="main">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="right"></div>
</div>
<script>
window.onload=function(){
console.log(document.body.clientHeight)
console.log(document.body.scrollHeight)
}
</script>
</body>
</html>