CSS之div嵌套问题及高度自适应问题的五种实现--个人总结

Jaden 发布于2019-08-30 15:53 / 2877人阅读

摘要：以下是在自己实习生面试的时候遇到的一个问题，事后自己也去总结了一下。

以下是在自己实习生面试的时候遇到的一个问题，事后自己也去总结了一下。
问题描述如下：
一个外层div里面嵌套两个内部div，外层div高度固定（假设未知），内层上面的div高度固定，如何让下面的div实现撑满外层的div高度？
看到过网上有类似的问题，但是大部分都是假设外层高度为100%或者是已知的，而我遇到的是外层高度虽然固定，但是我们并不知道是多少（这里需要说明一下，代码中外层的高度我虽然自己给了固定值，但是只是为了效果，后面其实都没有用到这个值，基本就满足我们不知道外层的具体高度是多少这个条件了），所以也参看了网上的一些零散的解法，自己也都去实践了一下，最后总结出五种可以实现的方法。
HTML代码如下：


    888888888
    12321423512

五种实现方法如下：
1、使用flex布局实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto; /*这里的margin纯属为了测试时候的显示效果居中，无实际用途*/
    background: aquamarine;
    display: flex;
    flex-direction: column;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    order: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    order: 1;
    flex-grow: 1;
}

2、下面的div使用position:absolute + top/bottom实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}
  
.div1 {
    height: 100px;
    background-color: violet;
}

.div2 {
    background-color: teal;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
}

3、下面的div设置margin-top为负值实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}
  
.div1 {
    height: 100px;
    background-color: violet;
    position: relative;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
    margin-top: -100px;
    box-sizing: border-box;
    padding-top: 100px;
}

4、外层div设置padding-top，内层上面的div绝对定位实现

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    box-sizing: border-box;
    padding-top: 100px;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    position: absolute;
    top: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
}

5、上面的div绝对定位，top:0；下面的div设置box-sizing + padding-top

.wrapper {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    background: aquamarine;
    position: relative;
}

.div1 {
    height: 100px;
    width: 100%;
    background-color: violet;
    position: absolute;
    top: 0;
}

.div2 {
    background-color: teal;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 100px;
}

第一次写文章，有什么问题欢迎指出，大家有什么其他的实现方法也欢迎一起分享~~

GPU云服务器云服务器高度自适应 textarea自适应高度 iframe高度自适应 iframe自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116691.html

面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法

摘要：优点相比之前布局更具有灵活性缺点脱离文档流，下面的元素都受影响。面试题目假设高度已知，请写出三栏布局，左右300px，中间自适应 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有几种方法呢？最容易的应该想到利用float来写，代码如下 css样式代码，以下五种都是用一个样式代码 ...

leanxi 2019-08-29 17:22 评论0 收藏0
假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...

alaege 2019-08-30 14:04 评论0 收藏0
假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...

Shihira 2019-08-01 18:40 评论0 收藏0