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

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

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

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

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

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

@zenxds 需要考虑 IE9，flex 不行

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

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

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

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

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

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

Bottom 会超过父元素