Question

它的Bootstrap 3.我只想将sidebar分成两部分。底部应足够高以适合内容，而顶部应填充父级的剩余高度。以下是我使用有限的HTML / CSS能力所能达到的最接近的程度：

我的HTML：

<body>
    <div class="container-fluid">
        <div class="sidebar col-md-3" style="background-color: lightyellow">
            <div class="topClass" style="background-color: lightcoral;">
                Should fill the remaining height of the parent
            </div>
            <div class="bottomClass" style="background-color: lightcyan;">
                Should be high enough to fit its contents
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
            </div>
        </div>
    </div>
</body>

我的CSS：

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
}

    .sidebar .topClass {
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto; 
        position: absolute;
        left: 0;
        right: 0;
    }

    .sidebar .bottomClass {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

我在Google计算机上看到了一个非常类似的问题，但在我的情况下，我不知道另一个<div>的高度，所以我认为我无法使用新的calc 1}}功能。

Answer 1

无需使用postion:fixed或position:absolute。使用table和table-row获得所需的结果。

body,html{height:100%; padding:0; margin:0;}
.container-fluid, .sidebar{height:100%; background:grey; display:table; width:100%;}
.topClass{display:table-row; height:100%;}
.bottomClass{display:table-row;}

DEMO

Answer 2

我有一个适用于Chromium和Chrome的解决方案，但不适用于FF，我没有在其他浏览器上测试它。

<强> HTML ：

<div class="sidebar">
    <div class="table stretch-v">
        <div class="row stretch-v">
            <div class="cell">
                <div class="top-class stretch">
                    Some Content
                </div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="bottom-class">
                    Some other Content
                </div>
            </div>
        </div>  
    </div>
</div>

<强> CSS ：

.sidebar{height: 100%; background:grey;}
.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}
.stretch-v {height:100%;}
.stretch {width:100%; height:100%;}
.top-class{overflow:auto;}

这就是它的样子： Demo

Answer 3

我的一位朋友使用flex layout向我展示了一个更好的解决方案，该解决方案至少适用于Firefox和Chrome / Chromium。

<强> HTML：

<div class="sidebar">
  <div class="top">
    Should fill the remaining height of the parent<br />
    and bring up a scrollbar on overflow.
  </div>
  <div class="bottom">
    Should be high enough to fit its content.
  </div>
</div>

<强> CSS：

body, html { height:100%; width:100%; padding:0; margin:0; }
.sidebar { height:100%; display: flex; flex-direction:column; }
.sidebar > .top { flex-grow:1; overflow:auto; }
.sidebar > .bottom { flex:0 0 content; }

我还更新了小提琴：JSFiddle

Answer 4

试试这个：

只需在topClass标记中添加100％的高度

<div class="topClass" style="background-color: lightcoral;height:100%">

正确的HTML：

 <div class="container-fluid">
        <div class="sidebar col-md-3" style="background-color: lightyellow;">
            <div class="topClass" style="background-color: lightcoral;height:100%">
                Should fill the remaining height of the parent
            </div>
            <div class="bottomClass" style="background-color: lightcyan;">
                Should be high enough to fit its contents
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
                A few lines of text <br />
            </div>
        </div>
    </div>

使<div>填充剩余高度</div>

4 个答案: