5

display:table親 div の 100%を埋める div を作成しようとしています。div構造は次のとおりです。

<div id="container">
   <div id="header"></div>
   <div id="body">
       <div id="mytablediv">
    <div class="row">
             <div id="left"> </div>
             <div id="content">&nbsp; </div>
                 <div id="right"> </div>
            </div>
       </div>
   </div>
   <div id="footer"></div>
</div>

CSS は次のとおりです。

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; }
#footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf;
}
#mytablediv { display:table; }
#row { display:table-row; }
#left, #content, #right {display:table-cell;}
#left, #right {background-color:red;}

それが私の完全なコードです。ここで本当にやりたいことは#mytablediv、ヘッダーとフッターの間の空白全体を埋めることです。

これはライブの jsFiddle の例です。

4

4 に答える 4

4

inheritanceここでプロパティを使用でき、次のように使用できます#mytablediv

#mytablediv {
    height: inherit;
}

100% の高さを指定しました。目的の結果を得るにはdiv#container、上記のプロパティを に割り当てる必要があります。div#body

于 2012-11-28T17:22:18.433 に答える
1

高さのパーセンテージ#mytablediv(またはその他の要素) が機能するためには、その親に何らかのheightセットが必要です。その親heightもパーセンテージにすることができますが、その場合、そのパーセンテージが機能するには、それ自身の親 (#mytabledivの祖父母) にも何らかのheightセットが必要です。htmlそして、これは要素までずっと続きます。

あなたの場合、ページ（実際にはウィンドウ）の が必要な場合は、「特定の#mytablediv」をすべての祖先に配置する必要があります。100%heightheight100%

html,
body,
#container,
#body {
    height: 100%
}

/* now this works */
#mytablediv {
    height: 100%;
}

ここにデモがあります：https://jsfiddle.net/joplomacedo/u4hezyav/

于 2012-11-28T17:11:40.297 に答える
0

最後に、jQuery の仕事に決めました。

function heightAutomate() {
    var bodyHeight = $("body").height();
    var viewportHeight = $(window).height();
    var shudbe_bf_Height = $("body").height() - 153; /*153:height of div+footer*/
    var real_bf_Height = $("#mytablediv").height();

    if (real_bf_Height < shudbe_bf_Height) {
        $("#bodyfix").css({"height":shudbe_bf_Height});
    }
}
于 2012-11-29T11:57:04.750 に答える