CSS和HTML：在哪裏設置頁面的主高度（父級）？

我想問哪裏把網頁的主要父母高度？CSS和HTML：在哪裏設置頁面的主高度（父級）？

例如，我已經構建我的網頁是這樣的：

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

    </div> 
</body>

我希望我的<body>高度auto所以什麼都頁包裝紙的高度，它會適合，但在同一時間，我想也是頁面包裝具有高度auto，因此它會響應其子<div> s。但設置高度auto不會給孩子身高的百分比（％）價值。

實施例：

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

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

設置.navbar高度到25％是行不通的。我只想問什麼是正確的方法或任何技巧來增加網頁的高度？

謝謝。

來源

2017-09-26 cute programmer

對於相對定位的元素，top, left, right, bottom屬性指定移動生成的框的相對距離。請記住，在相對定位的情況下，它們是互補的，所以top：1em和bottom：-1em表示相同，並且指定相同元素的頂部和底部（或左側和右側）沒有意義，因爲一個的值將被忽略。

但是在絕對定位的情況下。這裏，可以同時使用所有四個屬性來指定從定位元素的每個邊到包含塊的相應邊的距離。您還可以指定絕對定位框的其中一個角的位置 - 比如說使用頂部和左邊 - 然後使用寬度和高度指定框的尺寸（或者如果您想讓它使用寬度和高度收縮包裝以適應其內容）。

該代碼可滿足您的要求：所有的

.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

添加位置對我的作品，但我真的很感激，如果有一點點explantion感謝upvoted反正 –

我編輯了一些解釋的答案，並參考W3C標準的https：//www.w3。組織/維基/ CSS_absolute_and_fixed_positioning – JiangangXiong

我thnk u的使用引導bootstrp導航欄導航欄默認是bultin在bootstrap.cssü在這

來源

2017-09-26 03:49:53

正在增加將height:auto爲您的網頁，包裝

. page-wrapper { 
    height: auto; 
}

而對於身體。

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

來源

2017-09-26 03:56:41 bhansa

首先設置min-height: 100%到body和html。如果你想要身高的百分比，那麼它的父母應該有一定的身高，同時你希望父母身高是自動的，那麼也給予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：在哪裏設置頁面的主高度（父級）？

回答

相關問題