4

全体像: 個別の単位で構成される棒グラフを作成しようとしています。各ユニットはdivになります。バーは下から上に伸びます。

詳細: すべてのユニット div またはブロックを保持するコンテナー div があります。コンテナーには、これを行うための下部の垂直方向の配置があります。

これは次のようになります: https://jsfiddle.net/hpf4h/1/

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

#container {
    height: 100px;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    display: table-cell;
    vertical-align: bottom;
}

.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

これで問題なく動作しますが、コンテナーの高さを 100% にする必要があります。これが実現する理由: https://jsfiddle.net/7n7ZH/1/

CSSでこれを行う方法を見つけたいと思いますが、ハックしすぎないことが望ましいです。私はすでにプロジェクトの動作に jQuery を使用しているので、最後の手段としてそれを使用できます。

編集: また、HTML と本文を含め、すべての親タグの高さも 100% です。

4

3 に答える 3

2

#container のコンテナ要素を次のdisplay:tableように作成します: https://jsfiddle.net/7n7ZH/2/

html, body { height: 100%; margin:0; }

body { display:table; }

#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    display: table-cell;
    vertical-align: bottom;
}

.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}
<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

display:table-cellブラウザを使用するとdisplay:table-row、 、display:table-row-group、display:table. それらが見つからない場合は、代わりに疑似要素を作成します。それがここで起こっていることです。

したがって、あなたが言うときdisplay:table-cell; height:100%、それは作成された疑似要素の 100% ですdisplay:table。しかし、その疑似要素はそのコンテンツと同じ高さしかなく、CSS には「疑似要素の高さをその親の高さの 100% にする」と言う方法はありません。

display:tableただし、実際の要素の高さを 100% に設定することは可能です。その場合、ブラウザーはそれを使用し、display:table疑似要素を作成しません。

于 2013-05-19T19:44:38.577 に答える
1

適用するdisplay:table-cell;とheight同時に、期待する結果が得られることはめったにありません。を使用しようとしていることがわかりvertical-alignました。これが、おそらくtable-cell. 代わりに CSS ポジショニングを試してください:

display:table-cell;とvertical-alignをコンテナから取り出します。

要素と要素height:100%;の両方に追加して、コンテナーが拡張できるようにします。bodyhtml

position:relative;ドキュメント ルート (body タグ) ではなく、配置されたすべての子の起点となるコンテナーを設定します。これにより、子の位置を台無しにすることなく、コンテナを移動できます。

ブロックの周りにラッパーを追加します (これには div ではなく ul, li を使用できます)。

ブロックコンテナを次のように配置しますposition:absolute; bottom:0;

これがコードです...

#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

body { height:100% }
html { height: 100%}#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

body { height:100% }
html { height: 100%}

...そしてここにフィドルがあります...

https://jsfiddle.net/kPEnL/1/

于 2013-05-19T18:42:36.540 に答える