具体问题是这样的:
我在一个页面里,想要设定一个大div,让其在页面中的高度随浏览器窗口的大小来自动改变(差不多就是说顶部触顶底部触底,div与页面高度间是固定差值,而不是百分百关系),其内部有多个div排列,并且中间有一个小div是随大DIV的高度变化的。
比如说下面大DIV中的五个div
假设页面高度为X
大DIV的高度就是"X-10"(不因为内部内容多而引起高度变形),并且上下padding各5。——<!-- 这个我觉得百分比无法精确实现-->
而大DIV中的1、2、3、5这几个小div高度为Y的话,让div4的高度随时都=“大DIV - 四个Y”的动态高度。
这个要怎么实现?必须jS么?
我只能到这一步就无语了:
<body style="color:#FFF"><div style="width:300px; margin:0 auto; height:auto">
<div style="height:30px; background-color:#199">第1个DIV</div> <div style="height:30px; background-color:#188">第2个DIV</div>
<div style="height:30px; background-color:#177">第3个DIV</div>
<div style="height:150px; background-color:#166">第4个DIV栏<br />这个要随网页高度动态变化高度</div>
<div style="height:30px; background-color:#155">第5个DIV栏</div>
</div></body>
-------------------------------
各位大侠帮帮忙~~~谢了~~~
大致讲一下思路。
1、设定一个最外层容器div-box,实现【顶部触顶底部触底,div与页面高度间固定差值】,在css文件中的.div-box下可修改margin数值)
2、前三个div可公用一个样式 div1
3、第五个div绝对定位在底部 div5,需要将div-box的position设为relative,否则会基于body定位。
4、第四个div设置高度为100% (如果样式需要设置高度撑满整个页面,那么最外层高度设置必须设置为100%),绝对定位到div-box中。
以下是代码。
html页面代码
<!DOCTYPE html>css样式