CSS 上面固定(px)，下面可变(%)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2321 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://jsfiddle.net/mktrywLr/205/ 这个例子是左右的固定和可变参考这个方法想做个上面固定，下面可变的页面试了下不灵，请指教

可变

固定

CSS

指教

15 条回复 • 2017-12-12 18:12:19 +08:00

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,自动撑高，子元素无法计算百分比

sunhk25

2017-12-11 14:01:39 +08:00

@bzw875 抱歉说明不足，上面固定后，下面的要充满。也就是下面指定 100%后，通过 margin 来调整高度后，不知能否实现

bzw875

2017-12-11 14:06:10 +08:00

https://jsfiddle.net/DwApF/2/

nondanee

2017-12-11 16:01:44 +08:00 via Android

你想
height:calc(??% - ??px);
还是?
height:calc(?? * (100% - ??px));

zenxds

2017-12-11 16:02:35 +08:00

不考虑兼容性用 flex 布局是最简单的

yangheng4922

2017-12-11 16:07:59 +08:00

https://jsfiddle.net/yangheng/84fgznmk/

dud1ao

2017-12-11 16:32:27 +08:00

<!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>

sunhk25

2017-12-11 17:36:10 +08:00 via Android

@zenxds 需要考虑 IE9，flex 不行

sunhk25

2017-12-11 17:37:06 +08:00 via Android

@bzw875 我想利用我的例子来实现

sunhk25

2017-12-11 17:41:01 +08:00 via Android

@yangheng4922 能参考我的例子，改成上下模式模式的吗

overflowHidden

2017-12-11 17:49:48 +08:00

@sunhk25 https://jsfiddle.net/mktrywLr/207/

wxsm

2017-12-11 19:15:55 +08:00

一个简单的做法：上面那块用 absolute position，下面那块 100% 高，然后 padding-top 等于上面的高度。

sunhk25

2017-12-12 08:16:59 +08:00

@wxsm 这个做法有点问题就是，下面内容多时，出现滚动条后上面的「向上」按钮就被 top 部分挡住

dud1ao

2017-12-12 10:05:03 +08:00

@sunhk25 我 7 楼发的用不了吗？？上方固定高度下方 absolute 设置 top 为上方的高度 bottom 为 0px 这样下面的 div 就是自适应的

sunhk25

2017-12-12 18:12:19 +08:00 via Android

Bottom 会超过父元素