在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/UI  網(wǎng)絡(luò)安全/ flex計算后高度在搜狗7.0下子元素高度不是根據(jù)父元素計算么？

flex計算后高度在搜狗7.0下子元素高度不是根據(jù)父元素計算么？

請輸入代碼搜狗7.0瀏覽器（chrome/45）與chrome63表現(xiàn)不一致（windows下會出現(xiàn)2個滾動條），經(jīng)查看發(fā)現(xiàn)內(nèi)部兩個div(#div1,#div2)高度并非根據(jù).bottom高度進(jìn)行計算，所以這里有一些疑問，flex計算得到的高度在某些瀏覽器內(nèi)會導(dǎo)致子元素的計算問題么。


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    
    .container {
        width: 100%;
        height: 100%;
        display: flex;
    }
    
    .menu {
        width: 50px;
        height: 100%;
        background-color: #000111;
        flex-shrink: 0;
    }
    
    .body {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .top {
        width: 100%;
        height: 100px;
        background-color: #fff111;
        flex-shrink: 0;
    }
    
    .bottom {
        width: 100%;
        height: 100%;
        flex: 1;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="menu"></div>
        <div class="body">
            <div class="top"></div>
            <div class="bottom">
                <div id="div1" style="width: 100%;height: 100%;overflow: auto;">
                    <div id="div2" style="width: 100%;height: 120%;"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
回答
編輯回答
祉小皓

坑啊，我也遇到這個問題，在谷歌瀏覽器是可以繼承的。

2018年3月4日 01:33