父div不占用容器div的100％高度

Question

我有4個嵌套div的命名： wrap > container > parentBox > childBox 。

容器div為100％減去70px（70px是頁腳的高度（60）加上10px = 70px）。

我希望parentBox占用容器div剩下的其余高度（100％）。 我希望childBox占用100％的parentBox div ，減去header （也在包含單詞'test'的parentBox內），這是40px的高度;

但我得到的結果是parentBox和childBox采用表的高度的最小高度。

我在這里發現了一些關於這個的帖子，但沒有一個人幫我解決這個問題。

為什么這不起作用？

見jsFiddle

編輯：我認為相關的代碼：

#wrap {
      height: 100%;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px 0px;
    }

.parentbox {
    width: 100%;
    padding: 0px 3px 5px 5px;
    margin-bottom: 0px;
    overflow: hidden;
    min-height:100%;
    border:1px solid #000;
}

.childbox {
    overflow: auto;
    overflow-x: hidden;
    min-height:100%;
    border:1px solid #000;
}

Answer 1

.parentBox和.childBox只有一個min-height聲明，根據我的理解，這只會深入一級 - 意味着.childBox永遠不會知道100％的實際大小。

Answer 2

看起來你正在以某種方式尋找粘性頁腳。 您可以使用<table>使用的顯示屬性來實現您要查找的內容，並將它們設置為<div> 。 頁腳，然后也需要成為一個孩子。 這個想法是：全高度桌子顯示3行，中間一個盡可能多的空間。 http://jsfiddle.net/e62Wu/28/

<div id="wrap">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <div class="navbar-text ">HEADER</div>
        </div>
    </div>
    <div class="container">
        <div class="parentbox">
            <div class="header">
                 <h3>
            <span class="glyphicon glyphicon-user"></span><span style="margin-left:5px;">test</span>
        </h3>

            </div>
            <!-- header div end -->
            <div class="childbox">
                <table class="table table-hover">
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                </table>
            </div>
            <!-- childbox-content div end -->
        </div>
        <!-- parentbox div end -->
    </div>
    <!-- container div end -->
    <div id="footer"><!-- back inside -->
        <div class="container">
            <p class="text-muted credit">FOOTER</p>
        </div>
    </div>
</div>
<!-- wrap div end -->

這里基本上需要調度表格布局屬性：這將使用表格元素的典型行為。 如果您不喜歡它，請顯示：flex; 而不是顯示：table; 也可以使用，但這在CSS中仍然太年輕，以至於IE8-10根本不會理解它。

html, body, #wrap {
    height:100%;
    width:100%;
    margin:0;
    /* to include borders and padding inside size calculation */
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#wrap {
    display:table;
}
.navbar, #wrap > .container, #footer {
    display:table-row;
    background:lime;
}
#wrap > .container {
    height:100%;
    background:turquoise;
}

這至少需要IE8。

除了你的問題：％高度只有從中繼承值height直接父CSS。 min-height對於height甚至min-height min-height都沒有任何影響。

Answer 3

我不確定我理解你的問題，但嘗試刪除height: 100%; 來自#wrap > .container 。