BinaryDevelop
  1. ホーム
  2. html

[解決済み] 高さ100%からヘッダーを引く？重複

2023-03-29 18:59:06

質問

管理画面のレイアウトを作りたいのですが、#navと#contentのコンテナを常にブラウザウィンドウの100%にする方法がわかりません。100%height属性の継承がよくわからないのですが、どなたかもっとわかりやすく説明していただけませんか？ 

<!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;
}

何か思いつきませんか？

どのように解決するのですか？

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します