当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Getting scroll using calc

问题描述:

I have tried many things to get scroll bar using css calc and table layout. Below is my fiddle. Any help is greatly appreciated.

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

Here, I want scrollbar for #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}

网友答案:

Your #content's height is calculated based on its parent, not the body of the page.

One easy fix is to specify the height for the table and the 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>

fiddle: http://jsfiddle.net/y3U8F/126/

分享给朋友:
您可能感兴趣的文章:
随机阅读: