CSS＆HTML：ページの主な高さ（親）を設定する場所は？

ウェブページの主な親の高さをどこに置くべきか尋ねたいですか？例えばCSS＆HTML：ページの主な高さ（親）を設定する場所は？

私はこのように私のページを構築した：

<body> 
    <div class="page-wrapper"> 

    </div> 
</body>

私はautoに私の<body>高さが欲しい、これまでそう何ページラッパーの高さ、それがフィットしますが、同時に、私も欲しいですページラッパーの高さがautoになるようにしてください。その子の応答は<div>です。しかし、高さをautoに設定しても、子の高さのパーセント（％）の値は与えられません。

例：25％に.navbar高さを設定する

<body> 
    <div class="page-wrapper"> 
     <nav class="navbar navbar-default" style="height:25%;"> 

     </nav> 
    </div> 
</body>

が機能していません。私はちょうどウェブページに高さを加えるための適切なやり方は何かを尋ねたいのですが？

ありがとうございます。私はuがbootstrpナビゲーションバーナビゲーションバー、デフォルトでブートストラップを使用しているthnk

出典

2017-09-26 cute programmer

、top, left, right, bottom特性が生成されるボックスをシフトする相対距離を指定します。相対的な配置の場合、それらが互いに補完するので、top：1emとbottom：-1emは同じ意味を持ち、同じ要素に対して上下左右（または左右）を指定することは意味がありません。の値は無視されます。

しかし、絶対配置の場合。ここでは、4つのプロパティすべてを同時に使用して、配置された要素の各エッジから対応するブロックの対応するエッジまでの距離を指定できます。絶対的に配置されたボックスのコーナーの1つの位置を指定することもできます。たとえば、topとleftを使用してボックスの幅と高さを使用してディメンションを指定します（または、内容に合わせてシュリンクラップ）。すべての

.page-wrapper { 
 
    position: relative; 
 
    min-height: 100px; 
 
} 
 
.navbar { 
 
    height: 25%; 
 
    background-color:red; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 50%; 
 
    bottom: 0px; 
 
} 
 
.content { 
 
    height: 300px; 
 
    width: 50%; 
 
    background-color: blue; 
 
}

<body> 
 

 
    <div class="page-wrapper"> 
 

 
     <nav class="navbar navbar-default"> 
 
     </nav> 
 
     <div class="content"></div> 
 

 
    </div> 
 

 
</body>

出典

2017-09-26 05:29:58 JiangangXiong

位置を追加する私のために動作しますが、とにかく –

、私はいくつかの説明のための答えを編集し、W3C標準のhttpsを参照してくださいupvoted少しexplantionのおかげがある場合、私は本当にそれを感謝：//www.w3が。 org/wiki/CSS_absolute_and_fixed_positioning – JiangangXiong

がbootstrap.cssにbultinさuがこの

出典

2017-09-26 03:49:53

に追加されているページ・ラッパー

. page-wrapper { 
    height: auto; 
}

と体のためにのためにheight:autoを入れてください。相対的に位置決め要素について

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
}

出典

2017-09-26 03:56:41 bhansa

まずbodyとhtmlにmin-height: 100%設定：

このコードは、あなたのニーズを満たすことがあります。高さを％で指定する場合は、親の高さを定義する必要があります。同時に、親の高さを自動にしたい場合は、min-height:100%からparentまで、つまり.page-wrapperにします。子供にmin-height: 25%を付けてください。

childの高さを25%に制限する場合は、最大高さも25％にします。

body, html, .page-wrapper { 
    min-height: 100% 
} 
.navbar-default { 
    min-height: 25% 
}

出典

2017-09-26 06:31:39

CSS＆HTML：ページの主な高さ（親）を設定する場所は？

答えて

関連する問題