使用calc获取滚动

Question

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

JSFIDDLE：http://jsfiddle.net/y3U8F/124/

在这里，我想要#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}

Answer 1

namespace TestProxy { class Program { static void Main(string[] args) { var proxyUrl = "https://proxyhost:8888"; var proxy = new WebProxy(proxyUrl, false); var request = (HttpWebRequest) WebRequest.Create("http://targethost:80"); request.Proxy = proxy; // NotSupportedException } } } 的高度是根据其父级计算的，而不是根据页面的#content计算的。

一个简单的解决方法是指定body和table

的高度

table-cell

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