3

マークアップと一緒に私のcssルールは次のとおりです。

<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
    <div class='navbar-inner'>
        <div class='container'>
        <ul class="nav nav-list">
            <div>   
            <li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>><a href = "#">Upload a new Track</a></li>
            <li><a href = "#">View all blog post</a></li>
            <li><a href = "#">View all tracks uploaded</a></li>
        </div>
        </ul>
    </div>
    </div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">

今のところ、簡単に変更できるようにインラインスタイルにしています。テキストエディターを切り替えるのはちょっと面倒なので。

その div が利用可能なすべての高さを占めるようにするにはどうすればよいですか? ページの一番下のように。今のところ、このように見えます ここに画像の説明を入力

私が見たかったのは、黒い div がページで使用可能なすべての高さを占めていることです

4

1 に答える 1

6

はい、できます。この例 JSFiddleを確認してください。

基本的に、HTMLを次のように変更しました。

<div id="navbar">
    <div class='navbar-inner'>
        <div class='container'>
            <ul class="nav nav-list">
                <div>   
                    <li><a href = "#">Upload a new Track</a></li>
                    <li><a href = "#">View all blog post</a></li>
                    <li><a href = "#">View all tracks uploaded</a></li>
                </div>
            </ul>
        </div>
    </div>
</div>

基本的に、私が行ったのは、最も外側の div (style="height: 100%"上にのみあるもの) を削除し、次の div に ID を与えることだけでした。

CSS は次のとおりです。

html, body { height: 100%; }

#navbar { 
    /* this was moved from being an inline style in the div: */
    width:220px; margin-left: 200px;font-size:16px;
    height: 100%;
}​

基本的に、navbar ストリップが高さの 100% を使用するには、html と本文が実際に使用可能な高さの 100% を占めるようにする必要があります。(つまり、100% on#navbarは親要素の高さの 100% です。親要素がブラウザーの高さでない場合、機能しません。) </p>

于 2012-08-29T03:43:58.600 に答える