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

This topic created in 3087 days ago, the information mentioned may be changed or developed.

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

可变

固定

CSS

指教

15 replies • 2017-12-12 18:12:19 +08:00

bzw875

Dec 11, 2017

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

Dec 11, 2017

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

bzw875

Dec 11, 2017

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

nondanee

Dec 11, 2017 via Android

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

zenxds

Dec 11, 2017

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

yangheng4922

Dec 11, 2017

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

dud1ao

Dec 11, 2017

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

Dec 11, 2017 via Android

@zenxds 需要考虑 IE9，flex 不行

sunhk25

Dec 11, 2017 via Android

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

sunhk25

Dec 11, 2017 via Android

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

overflowHidden

Dec 11, 2017

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

wxsm

Dec 11, 2017

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

sunhk25

Dec 12, 2017

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

dud1ao

Dec 12, 2017

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

sunhk25

Dec 12, 2017 via Android

Bottom 会超过父元素