私はビューポートのサイズの75％のdivを作成しようとしています。ピクセル値を使用すると、高さが追加されますが、パーセンテージを使用すると、非常に細い線として表示され、変更されません。パーセント値を使用すると、divの高さが変化しないのはなぜですか？
これが私のHTMLです：
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2" id="main-wrapper"> </div>
</div>
</div>
</body>
これは私のCSSです：
#main-wrapper {
background-color: blue;
height: 75%;
}
は、なぜあなたは幅を指定しませんでしたか？、幅プロパティをコードに追加してdivを表示します。
html,
body,
div {
width: 100%;
height: 100%;
}
#main-wrapper {
background-color: blue;
height: 75%;
width: 100%;
}<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div>
</div>
</div>
</body>私はクラスの列の幅を指定して以来、私がしなければならないと思っていませんでした。 – Nikolas
それはすでにブロック要素であるとして、あなたのdivに幅を与えるために、その必要はありません。親の高さを指定するだけです。
この場合、rowまたはbody要素です。
html,
body,
.container-fluid,
.row {
height: 100%;
}
#main-wrapper {
background-color: blue;
height: 75%;
}<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div>
</div>
</div>
</body>注：未確定である親に割合の高さを使用することは推奨されていない、設計上の問題が発生する可能性があります。あなたは、標準的なフレームワークを使用している場合
また、75vhとその高さ
試みを操作するための
classまたはidあなた自身を追加し、この目的のために、デフォルトのCSSを編集していない、高さをパーセンテージで指定することはできません。..ビューポートの高さを –として設定できます。高さは％NuthanKumarで指定できますが、親に依存します – Dherya
コンテナの高さを変更します。 – BigMonkey89WithaLeg