2

子 div の.cell高さが親の 100% の高さになるようにします。しかし、それは起こっていません。

HTML:

<div class="header">
    header
</div>
<div class="wrapper">    
    <div class="padding">
        <div class="table bg">
            <div class="cell">
                hello world
            </div>
            <div class="cell">
                dummy text
            </div>
        </div>
    </div>
</div>
<div class="footer">
    footer
</div>

CSS:

html,body{height:100%;}
body{margin:0;padding:0;}
.footer,.header{background:black;height:30px;color:white;}
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
.padding{padding:20px;}
.table{display:table;width:100%;}
.cell{display:table-cell;}
.bg{background:#ccc;}

私は持っているので、それは起こっていないと思います

.wrapper{min-height:calc(100% - 60px);height:auto !important;}

に変更.wrapperすると発生します

.wrapper{height:calc(100% - 60px);}

それからそれは起こっています。

これがフィドルです。

4

1 に答える 1

3

min-height子要素は親要素から継承されません。

だから変更min-height:calc(100% - 30px);...

ラッパーにheight:calc(100% - 30px);設定し、子 div に height:100% を設定して、その高さを継承します。

フィドル

FIDDLE2 (たくさんのコンテンツ)

.wrapper
{
  height:calc(100% - 60px); /* <--- */
}
.padding
{
  padding:20px;
  height: 100% /* <--- */
  -moz-box-sizing: border-box;
  box-sizing: border-box; /* <--- */
}
.table
{
  display:table;
  width:100%;
  height: 100%; /* <--- */
}
于 2013-10-23T05:48:59.170 に答える