Question

我觉得我对CSS非常好，但是这个问题让我发疯了。

我试图让3列高度为100％。前两列是向左浮动的，第三列没有浮动，只是在上边缘。所有3列都有一个包装器可以清除浮子。 HTML / BODY标记的高度为100％。据我所知，如果所有父容器都有100％的高度，它应该工作。包装器应该与最高的内容块（第三列）一样高，所以前两列也应该高，使用100％高度。

问题是，包装器和身体标签的高度等于浏览器窗口的高度。由于某种原因，它不会读取中间列的内容高度。对此我可能有一个非常愚蠢的简单解释，我只是错过了它。

不想要溢出黑客。不能做人造柱。我不知道为什么这不能使用CSS规范来处理身高。

如果我在包装器div上放置像素数量，就像2000px高度一样，前两列填充高度就像我想要的那样。为什么这不起作用？

HTML：

<body>
    <div class="wrapper clearfix">

        <section class="sidebar-news clearfix"></section>

        <section class="black-bar-vertical"></section>

        <section class="section-main-content event-detail"></section>

    </div>
</body>

CSS：

html {
    height: 100%;
}

body {
    background-color: #333;
    height: 100%;

    * {
        box-sizing: border-box;
    }
}

.wrapper {
    height: 100%;
    position: relative;
    margin: 0 auto;
}

.sidebar-news {
    float: left;
    width: 300px;
    height: 100%;
    min-height: 100%;
    background-color: @site-color-yellow;
    margin-right: -25px;
    padding: 76px 40px 20px 20px;
}

.black-bar-vertical {
    position: relative;
    float: left;
    width: 116px;
    background: url("@{img-path}/black-bar-vertical.png") repeat-y top center;
    min-height: 100%;
    height: 100%;
    text-align: center;
    margin-right: -25px;
    padding-top: 81px;
    z-index: 50;
}

.section-main-content {
    width: 580px;
    background-color: #FFF;
    padding-top: 55px;
    padding-left: 10px;
    margin-left: 360px;
}

SCREENSHOTS：

Top & Bottom of page

The height of the two columns in dev tools

编辑：

发现这篇文章，这基本上是同样的问题。 html body is smaller than its contents

如果我将身高的高度属性更改为min-height，则包装器将成为内容的完整高度，是的！但是，前两列的100％高度根本不起作用。

就像我原先想的那样......如果在一个元素上设置了100％的高度，它会向dom冒泡，并继承它的父容器的高度。如果该父容器具有100％的高度，则它继承父父的父高等的高度。这可以按预期工作。但当它以100％的高度击中身体标签时，它会将其读取为浏览器窗口的100％高度。这是默认行为，对我来说没有意义。如果你取下身体的高度，它会包含所有内容，但是然后包装div会查看身体的高度定义并且没有任何东西，因为身体上没有设置高度。

如果不使用flexbox，表格布局，javascript或绝对定位的元素，这种特定场景似乎是不可能的。

Answer 1

Flexbox fo-sho！

.wrapper {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: stretch;
}
.sidebar-news {
    min-height: 100vh;
    flex-grow: 1;
}

.black-bar-vertical {
    min-height: 100vh;
    flex-grow: 1;
}

.section-main-content {
    min-height: 100vh;
    flex-grow: 1;
}

选中此项以获取参考号码Flexbox CSS Tricks

Answer 2

我决定使用虚设列的组合来获得第一列和第三列背景颜色，然后使用top：0，bottom：0来扩展全高度的绝对定位第二列。

如果有人仍然可以解决这个问题，我很乐意听听它是如何完成的！

100％高度不起作用 - 仅浏览器窗口的高度，而不是内容

2 个答案: