Html 制造<；部门>；填充剩余高度_Html_Css_Twitter Bootstrap_Layout_Twitter Bootstrap 3

Html 制造<；部门>；填充剩余高度

html css twitter-bootstrap layout twitter-bootstrap-3

Html 制造<；部门>；填充剩余高度,html,css,twitter-bootstrap,layout,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Layout,Twitter Bootstrap 3,这是引导程序3。我只想把我的侧边栏分成两部分。底部部分应足够高以容纳内容物，而顶部部分应填充父级的剩余高度。以下是我有限的HTML/CSS能力所能达到的最接近的目标：我的HTML： <body> <div class="container-fluid"> <div class="sidebar col-md-3" style="background-color: lightyellow"> <div cl

这是引导程序3。我只想把我的

侧边栏

分成两部分。底部部分应足够高以容纳内容物，而顶部部分应填充父级的剩余高度。以下是我有限的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>

我在谷歌机器上看到了一个非常类似的问题，但就我而言，我不知道另一个

的高度，所以我想我不能使用新的

计算功能。
无需使用定位：固定或定位：绝对。使用表格
和表格行
获得所需结果
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;}

试试这个：
只需在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>


应填充父对象的剩余高度
应足够高，以适合其内容
几行文字

几行文字

几行文字

几行文字

我有一个解决方案，适用于Chrome和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>

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

这就是它看起来的样子：
我的一个朋友向我展示了一个使用flex布局的更好的解决方案，它至少适用于Firefox和Chrome/Chrome
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>

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

我还更新了fiddle:
错误的解决方案。这使得顶部占据了窗户高度的100%。正如我在文章标题和正文中提到的，我需要它来填充剩余的高度，即顶部分区高度=窗口高度-底部分区高度。尝试向顶部添加一些内容以创建溢出。在这一点上，我希望它通过简单地添加一个滚动条来保持其布局。相反，它会膨胀并向下推动底部。添加溢出：将滚动到顶部也没有帮助。或者我遗漏了什么？这是我目前为止得到的最好的解决方案。我会接受这个答案，直到有人想出更好的主意。谢谢。这是一个很好的解决方案。flex grow:1允许内容部分填充整个屏幕，而flex:0内容将保留在底部，无论屏幕大小如何。
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; }