89

管理パネルのレイアウトを作成したいのですが、#nav と #content コンテナーを常にブラウザー ウィンドウの 100% に表示する方法がわかりません。100% の高さ属性の継承がわかりません。誰かがより明確に説明できますか?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index.htm</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

        <div id="header">
            <img src="./img/header_logo.png" alt="bla"/>
        </div><!-- #header -->
        <div id="nav">
        </div><!-- #nav -->
        <div id="content">
        asfdg
        </div><!-- #content -->
        <div class="clear">
        </div>

</body>
</html>

main.css

    html, body{
    font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
img{
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}
#wrapper{

}
#header{
    background: url(img/header_bg.png) repeat-x;
    height: 65px;
    padding-top: 20px;
    padding-left: 25px;
}
#nav{
    width: 235px;
    float: left; 
    background-color: #f7f7f7;
    border-right: 1px solid #d9d9d9;
    height: 100%;

}
#content{
    float: left;
    width: auto;
    padding: 15px;

}
.clear{
    clear: both;
}

何か案は？

4

3 に答える 3

159

ブラウザが CSS3 をサポートしている場合は、CSS 要素を使用してみてくださいCalc()

height: calc(100% - 65px);

ブラウザの互換性オプションを追加することもできます。

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */

また、値の間にスペースがあることを確認してください。https ://stackoverflow.com/a/16291105/427622 を参照してください。

于 2013-07-03T00:13:59.397 に答える
16

コメントで述べたように、height:100% は、明示的に定義されている親コンテナーの高さに依存しています。必要なものを実現する 1 つの方法は、絶対/相対配置を使用し、左/右/上/下のプロパティを指定してコンテンツを「引き伸ばし」、使用可能なスペースを埋めることです。jsfiddleで達成したいことを収集しました。結果ウィンドウのサイズを変更してみると、コンテンツが自動的にサイズ変更されることがわかります。

あなたの場合のこのアプローチの制限は、親コンテナーに明示的な margin-top を指定して、そのコンテンツを下にオフセットして、ヘッダー コンテンツ用のスペースを確保する必要があることです。ただし、JavaScriptを投入すると動的にすることができます。

于 2012-04-17T20:06:53.403 に答える
4

「ブラウザウィンドウの100％」の場合、これを文字通り意味する場合は、固定位置を使用する必要があります。次に、top、bottom、right、およびleftプロパティを使用して、ビューポートのそれぞれのエッジからdivsエッジをオフセットします。

#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}

これにより、左側の235ピクセルがナビゲーションに割り当てられ、画面の右側の残りの部分がコンテンツに割り当てられる画面が設定されます。

ただし、画面全体を一度にスクロールすることはできませんのでご注意ください。overflow:autoどちらかのdivに適用することで、どちらかのペインを個別にスクロールするように設定できます。

注：IE6以前では、固定ポジショニングはサポートされていません。

于 2012-04-17T19:55:38.757 に答える