0

css calcとテーブルレイアウトを使用してスクロールバーを取得するために多くのことを試みました。以下は私のフィドルです。どんな助けでも大歓迎です。

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

1 に答える 1

1

の高#contentさは、ページの ではなく、その親に基づいて計算されbodyます。

簡単な修正方法の 1 つは、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/

于 2015-12-11T10:59:40.213 に答える