开发者社区 问答 正文

有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。

如题,求三种解法,希望各位大神能详细说明下。

展开
收起
a123456678 2016-03-26 13:54:13 3376 分享 版权
1 条回答
写回答
取消 提交回答
  • 如果外层div高度自适应于内部,就完全不需要额外写规则了,另外一个DIV绝对能撑高外层div,填得紧紧实实的。

    如果是外层div自适应于它的父级,纯CSS的办法是有的。

    为了方便演示,下面的demo都让外层元素100%适应于html和body,点Edit in JSFiddle之后可以看到,拖动窗口高度,均能自适应。

    box-sizing方案
    外层box-sizing: border-box; 同时设置padding: 100px 0 0;
    内层100像素高的元素向上移动100像素,或使用absolute定位防止占据空间;
    另一个元素直接height: 100%;

    2019-07-17 19:16:05
    赞同 展开评论
问答地址: