CSS自動調整高度問題

css

CSS/UI/UX 2018-03-11 18:07:33 ‧ 12063 瀏覽

分享至

不好意思又有問題
請問我有幾個div
page_content高度1000
想要裡面的第三個div隨前面兩個div做調整
像是第一個div 100
第二個div 200
第三個就是1000 - 100 - 200

<div class='page_content'>
    <div>
    </div>
    <div>
    </div>
    <div >
    </div>
</div>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

暐翰

iT邦大師 1 級 ‧ 2018-03-11 21:22:25

最佳解答

運用flex-grow就可以達到你要的
以下是原理跟我寫的範例

原理:

只對第三個div設置 flex-grow
，它就會分配到全部的剩餘空間。

範例:

<!doctype html>
<html lang="en">

<head>
    <style type="text/css">
        .page_content {
            display: flex;
            flex-flow: column nowrap;
            width: 800px;
            height: 1000px;
        }

        .page_content :nth-child(1) {
            background-color: #f00;
            height: 100px;
        }

        .page_content :nth-child(2) {
            background-color: #090;
            height: 200px;
        }

        .page_content :nth-child(3) {
            background-color: #00f;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class='page_content'>
        <div>
            我是第一個div
        </div>
        <div>
            我是第二個div
        </div>
        <div>
            我是第三個div
        </div>
    </div>
</body>

</html>