百分率のHTMLのパーセンテージのパーセンテージでの高さが機能しません

div heightの項目に依存しないパーセンテージを使用して設定したいと思います。画面の上部に固定ヘッダーがあり、中央にdivがあります。しかし、高さをパーセンテージで設定しても機能しません。それは私がそこにいくつかの項目を追加する場合にのみ拡大します。百分率のHTMLのパーセンテージのパーセンテージでの高さが機能しません

助けてください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>lol</title> 
    <link rel="stylesheet" href="style.css"/> 
</head> 
<body> 
<div id="conteiner"> 
    <header> 
     <p>header</p> 
    </header> 
    <div id="main"> 
     <p>main info</p> 
    </div> 
</div> 
</body> 
</html>

そしてこのCSS：

私はこのコードを持っています。

html{ 
    width: 100%; 
    height: 100%; 
} 
body{ 
    overflow: hidden; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

header{ 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    height: 10%; 
    border: solid red 1px; 
} 

#main{ 
    display: block; 
    width: 65%; 
    height: 80%; 
    border: solid green 1px; 
    margin: 8% auto 0 auto; 
}

出典

2016-12-05 Anonymous

のようなコンテナのdivのコードのスタイルを記述する必要がありますあなたの後のscrenのパーセンテージの場合％of of％ –

親100％も忘れてしまった。

#conteinerは、そのブロックがdivブロックであるため、デフォルトで自動高さを持ちます。デフォルトの高さは子の高さです。親の高さをパーセントで子供の高さは、あなたのスタイルファイルでブラウザ

#conteiner { 
    height: 100%; 
}

出典

2016-12-05 12:16:45 ixpl0

イエス・キリスト、コンテナについて忘れて、たくさんのことを。もう一度質問してください。高さ10％のヘッダーがあります。コンテナのマージン・トップを10％に設定すると、ヘッダーの下になく、より低い方に配置されます。どうしたの？ ty） –

そのため、ブロックの幅WIDTHプロパティから計算した余白があるため（ – ixpl0

ehm、それを取得していません）この詳細についてはどこで私にお伝えください） Ty –

によって無視され、手動で設定されていない場合、あなたはあなたが代わりにVHユニットを使用することができ

#container{ 
    height:100%; 
}

出典

2016-12-05 15:03:15

百分率のHTMLのパーセンテージのパーセンテージでの高さが機能しません

答えて

関連する問題