鍍金池/ 問答/HTML5  HTML/ 怎么讓div里面的子元素的高度自適應(yīng)呢

怎么讓div里面的子元素的高度自適應(yīng)呢

如下圖：

clipboard.png

回答
編輯回答
淺時(shí)光

用flex布局可以解決這個(gè)問題

跟你一樣的div結(jié)構(gòu)，為了便于看清和區(qū)分，里面寫了字母。樣式里每個(gè)div都加了背景色。完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
</head>
<style>
    body {
        margin: 0;
    }

    .contain {
        background: gray;
        height: 400px;
        display: flex;
        flex-direction: column;
    }
    .A {
        background: red;
    }
    .B {
        background: yellow;
        flex-grow: 1;
    }
    .C {
        background: blue;
    }
</style>
<body>
<div class="contain">
    <div class="A">a</div>
    <div class="B">b</div>
    <div class="C">c</div>
</div>
</body>
</html>

運(yùn)行效果如下：

image-20180605144241659

下面白色的部分是網(wǎng)頁(yè)的空白部分?？梢钥闯?，已經(jīng)實(shí)現(xiàn)了你要的效果。A B C我都沒有給高度，B的高度是自動(dòng)填滿contain的，所以壓根看不到contain的灰色。

你可以復(fù)制代碼自己運(yùn)行一下，在瀏覽器里隨意的改contain、A、C的高度，不管怎么改，B都會(huì)自動(dòng)填充。

如果解決了你的問題，給我個(gè)采納吧！

2018年5月22日 20:41