100％高度不起作用-僅高度瀏覽器窗口的高度，不包含內容

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;
}

屏幕截圖：

頁面頂部和底部

開發工具中兩列的高度

編輯：

找到了這篇文章，這基本上是相同的問題。 html正文小於其內容

如果我將身體的height屬性更改為min-height，那么包裝器將成為內容的全部高度，是的！ 但是，前兩列的100％高度根本不起作用。

就像我最初想的那樣...如果在元素上設置100％的高度，它將使dom冒泡，並繼承其父容器的高度。 如果該父容器的高度為100％，則它將繼承父容器的高度，依此類推。 但是，當它以100％的高度碰到body標簽時，它被讀取為瀏覽器窗口的100％高度。 這是默認行為，對我來說沒有意義。 如果不考慮身體的高度，它會包含所有內容，但是包裝div會根據身體的高度定義查找身體，因為身體上沒有設置高度，所以什么也沒有。

如果不使用flexbox，表布局，javascript或絕對定位的元素，似乎無法實現這種特定情況。

Answer 1

Flexbox佛商！

.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技巧

Answer 2

我決定結合使用人造列以獲得第一列和第三列的背景色，然后使用絕對位置的第二列，可以使用top：0，bottom：0拉伸整個高度。

如果任何人仍然可以解決此問題，我很想聽聽它是如何完成的！

100％高度不起作用-僅高度瀏覽器窗口的高度，不包含內容

問題描述

2 個解決方案

解決方案1
0 2016-03-04 02:02:01

解決方案2
0 2016-03-04 16:31:40

100％高度不起作用-僅高度瀏覽器窗口的高度，不包含內容

問題描述

2 個解決方案

解決方案1 0 2016-03-04 02:02:01

解決方案2 0 2016-03-04 16:31:40

解決方案1
0 2016-03-04 02:02:01

解決方案2
0 2016-03-04 16:31:40