Question

我试图在最小高度为100％的父级div内扩展子高度，我想根据其中的内容扩展包装器的高度，如果我将min-height设置为100 ％，包装器根据内容扩展，但是侧边栏和侧边栏可以折叠到其内容的高度，我希望它们大约是父包装器总高度的98％。

如果我设置高度：100％到父包装，并且高度：98％到儿童侧边栏和侧边栏 - 坦克，它们会扩展，但是包装器不会根据内容div内的内容进行扩展，包装器只会扩展到高度浏览器并没有显示溢出的内容。

HTML：

<body>
    <div class="wrapper">
        <div class="client-dasboard">

            <div class="sidebar">

            </div>

            <div class="sidebar-tanks">

            </div>

            <div class="content>

            </div>
        </div>
    </div>
</body>

SCSS：

body{
    display:block;
    position: relative;
    height:100%;

    .wrapper{
        display: block;
        position: relative;
        height: 100%;
        overflow: hidden;
        width: 1168px;
        margin: 0px auto;
        background: #ececec;

        .sidebar,
        .sidebar-tanks{
            height: 98%;
            display: block;
            float: left;
        }

        .content{
            min-height: 100%;
            height:auto;
        }
    }  
}

Answer 1

问题在于：

.sidebar,
.sidebar-tanks {
    height: 98%;
    display: block;
    float: left;
}

将一个元素附加到侧边栏的父级，并使用clear：两个CSS属性，并将float：right（或左）添加到内容中。它可能对你有帮助。

但是...

如果要在其父div中扩展子高度，请尝试以下方法：flexbox。这与你必须做的非常相似。这是关于normalizing flexbox bugs的另一篇好文章。它非常实用且易于使用。

我希望这会对你有所帮助:)。

高度100％不适用于父级div内的儿童，最小高度：100％

1 个答案: