使用 calc 获取滚动答案

【问题标题】：Getting scroll using calc使用 calc 获取滚动
【发布时间】：2016-03-17 06:18:16
【问题描述】：

我已经尝试了很多方法来使用 css calc 和表格布局来获得滚动条。下面是我的小提琴。非常感谢任何帮助。

这里，我想要#content的滚动条

HTML：

<div class="displayTable">
<div class="displayTableCell">
<div id="content">
      body content<br>body content<br> ...
</div>
<footer>copyright etc</footer>

</div>
</div>

CSS：

html, body { 
   height: 100%;
}
#content {
    height: -webkit-calc(100% - 50px); 
    background-color: yellow;
    overflow:auto
}
footer {
    height: 50px;
    background-color: grey;
}
.displayTable{display:table;table-layout:fixed;width:100%}
.displayTableCell{display:table-cell}

【问题讨论】：

好的。我已经添加了它。对不起，我赶时间。

标签： css overflow css-calc

【解决方案1】：

#content 的高度是根据其父级计算的，而不是页面的 body。

一个简单的解决方法是指定table 和table-cell 的高度

<div class="display:table;table-layout:fixed"> <-- height:100% / fixed height
    <div class="display:table-cell">           <-- height:100%
         <div id="content"> </div>             <-- height:calc(height:100% - 50px)
         <footer> </footer>                    <-- height:50px;
    </div>
</div>

小提琴：http://jsfiddle.net/y3U8F/126/

【讨论】：