https://jsfiddle.net/mktrywLr/205/ 这个例子是左右的固定和可变 参考这个方法想做个上面固定,下面可变的页面 试了下不灵,请指教
1
bzw875 2017-12-11 13:54:00 +08:00
html,body {
height: 100%; } #a { height: 300px; background-color: #fde2e2; } #b { height: 60%; background-color: #d1daf3; } <div id="a">a</div> <div id="b"></div> 所有父元素都有指明高度,否则是父元素 height:auto,自动撑高,子元素无法计算百分比 |
2
sunhk25 OP @bzw875 抱歉说明不足,上面固定后,下面的要充满。也就是下面指定 100%后,通过 margin 来调整高度后,不知能否实现
|
3
bzw875 2017-12-11 14:06:10 +08:00 1
|
4
nondanee 2017-12-11 16:01:44 +08:00 via Android 1
你想
height:calc(??% - ??px); 还是? height:calc(?? * (100% - ??px)); |
5
zenxds 2017-12-11 16:02:35 +08:00 1
不考虑兼容性用 flex 布局是最简单的
|
6
yangheng4922 2017-12-11 16:07:59 +08:00 1
|
7
dud1ao 2017-12-11 16:32:27 +08:00 1
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{margin:0px;padding: 0px;} .top{height:300px;background: red;} .bottom{position: absolute;top:300px;background: yellow;bottom:0px;width: 100%;} </style> <body> <div class="top"></div> <div class="bottom"></div> </body> </html> |
10
sunhk25 OP @yangheng4922 能参考我的例子,改成上下模式模式的吗
|
11
overflowHidden 2017-12-11 17:49:48 +08:00
|
12
wxsm 2017-12-11 19:15:55 +08:00
一个简单的做法:上面那块用 absolute position,下面那块 100% 高,然后 padding-top 等于上面的高度。
|
14
dud1ao 2017-12-12 10:05:03 +08:00
@sunhk25 我 7 楼发的用不了吗?? 上方固定高度 下方 absolute 设置 top 为上方的高度 bottom 为 0px 这样下面的 div 就是自适应的
|
15
sunhk25 OP Bottom 会超过父元素
|