100％高度身體比100vh高，引起角的路由器出口

我已經角頁，家庭，它由2個部件和路由器出口100％高度身體比100vh高，引起角的路由器出口

<div class="home-container"> 
    <header></header> 
    <sub-header></sub-header> 
    <router-outlet></router-outlet> 
</div>

我想歸屬容器以上，至少是全屏高度。標題應該顯示，然後是子標題，那麼router-outlet的內容至少應該填滿屏幕的其餘部分（或者更多，如果有更多內容的話）。

通常情況下，這很容易，但看起來router-outlet正在搞砸它。例如可以看到http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas，點擊運行，然後點擊「英雄」鏈接進行路由。在這個例子中，我不希望英雄div比屏幕更高，也不明白它爲什麼。

我的風格來完成這個。（假設路由器的出口是「我的頁面」上）

html, body { 
    height: 100%; 
} 

.home-container { 
    height: 100%; 
} 

.my-page { 
    height: 100%; 
}

我期待在這裏顯然是家用容器是全屏，顯示標題，顯示子頭，和我的頁面，然後在填充最小的垂直高度的其餘部分。

雖然實際上發生了什麼，但是有一個可用高度的滾動條看起來與我的標題和子標題相同。

這個plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas說明了我的意思。如果您點擊運行，然後點擊「英雄」鏈接，您將看到路由器插座的內容，在這種情況下爲heroes-list.component，帶有綠色背景。我不明白爲什麼當所有設置爲100％時，屏幕下方的綠色都在流血

更新我已嘗試在此嵌套中將不同CSS屬性的所有方式用於不同的級別。包括100vh vs 100％，最小高度和高度，以及body/html/home-container/my-page的每個組合。我也試圖與角的CSS :host一樣的，沒有什麼不同

相同的結果UPDATE2如果我將它移出元素的那麼一切都表現爲你所期望的，而且也沒有垂直滾動條。關於路由器出口封裝器的某些內容會在某處添加垂直空間，但我無法弄清楚導致它的位置或內容。

最後更新下面的答案可能是用於某些應用，但我最終只是給。我的頁面指定的高度，只是在做height: calc(100vh - $headerheight - $subheaderheight)它能夠完成

來源

2017-10-19 Joshua Ohana

嘗試使用'100vh！important'而不是'100％'代替你的身高 – tobie

@tobie根據我的更新，我嘗試了在100vh和100％（帶重要標誌）之間切換任何/所有組合，不幸的結果 - 你可以看看附帶的plnkr的一個實例 –

我很驚訝身高百分比在這裏有任何影響。要使CSS中的百分比高度起作用，父元素需要明確的高度，否則計算的值將變爲auto。當我在Chrome中檢查DOM時，你的'。home-container'元素被封裝在一個''元素中，而其父元素是''，並且因爲兩個_any_樣式都顯示在巡視器中......所以'.home-container'完全受'身高：100％對我來說是一個謎，說實話。 – CBroe

至於工作解決它我明白，100％的孩子會等於父母自然身高的大小。如果你想填充可用的空間，你應該使用flex，除非你有要求支持IE9及以下版本。

我會更新你的錨被包含在一個div（或其它包裝）

<h1 class="title">Component Router</h1> 
<div> 
    <a [routerLink]="['CrisisCenter']">Crisis Center</a> 
    <a [routerLink]="['Heroes']">Heroes</a> 
</div> 
<router-outlet></router-outlet>

然後，我會利用Flexbox，就允許根據需要

.hero-list { 
    background-color: green; 
    height: 100%; 
    overflow:auto 
} 

undefined { 
    flex: 1; 
} 

body, html, my-app { 
    height: 100%; 
} 

my-app{ 
    display: flex; 
    flex-flow: column; 
}

Plunker測試的內容，以擴大：http://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview

在鉻我仍然有滾動條，因爲身體上8px的餘量 - 這可以很容易地與CSS刪除滾動免費全高度體驗。

來源

2017-10-23 05:18:22 damanptyltd

「孩子100％將等於父母自然身高的大小」 - 這僅適用於絕對定位的孩子。對於靜態定位的元素，100％高度總是意味着父元素的_specified_高度的100％。 –

我不喜歡這個答案，並最終沒有使用它。我們不應該通過未定義來定位元素。因爲我認爲這個答案對未來的讀者最有幫助，所以我獎勵你的賞金。 –

我會爭辯說，未定義的元素不應該首先存在，否定操作它的必要性。一旦你找到了一個可以接受的解決方案，請在這裏回覆，因爲我有興趣知道。 – damanptyltd

你應該至少以某種方式重置瀏覽器默認樣式像這樣的第一：

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
}

然後，你可以achive你想要什麼，而不柔性佈局，如果通過者優先分裂頁放入頭部分和主要內容部分與預設的部門...因此，可以說標題和鏈接一起進入一個容器div與即20％的高度，目前主要內容在一個標籤「未定義」得到80的高度％，如果您現在將應用程序容器的高度設置爲100％或100vh，它應該按預期工作！

EDIT（因爲我的主題仍然是開放的...）：

您是否嘗試過這個CSS代碼像上面所解釋的，就像魅力！？

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html, body, my-app { 
    height: 100%; 
    height: 100vh; 
} 

h1 , h1 + div { 
    height: 10%; 
    height: 10vh; 
} 

undefined { 
    display: block; 
    background-color: green; 
    min-height: 80%; 
    min-height: 80vh; 
}

來源

2017-10-23 07:43:18 ToTaTaRi

有兩個原因使您<body>元素視的身高超過100％：

的<body>元素的默認邊距是來自瀏覽器的內置樣式，通常是8px。這意味着<body>元素將與<html>元素一樣高，但在元素上方和下方也會有8px的空間，導致<html>元素溢出。
由於margin collapsing，<h1>元素的上邊距從容器中「脫落」。這使得<body>元素上方的空間等於<h1>的默認頂邊距（約21px而不是8px）。

將零邊距設置爲<body>（ToTaTaRi答案的一部分）可以幫助您解決第一個問題。要解決第二個問題，您應該使<body>元素或（可能更好）.my-app容器建立新的Block Formatting Context。最簡單和最具跨瀏覽器的方式是設置容器overflow:hidden（其他選項是display:flow-root，適用於現代Chrome/Firefox或column-count:1，適用於IE10 +和所有現代瀏覽器，可以比較幾乎所有選項in this live example）。

來源

2017-10-23 08:09:52

我想你可能誤解了這個問題。您指定的這兩個問題不是核心問題 - 這是海報希望孩子填充父元素的剩餘垂直空間的事實，而是與父元素的高度相同。這是擴展通過父項底部的子項，創建滾動條。如果你把你的保證金和溢出修復，這仍然會發生。 – damanptyltd

是的，但多數民衆贊成，我們有一個100％或100vh sourrounding div（我的應用程序或身體），然後我們把標題和鏈接標題，讓說高度約20vh和主要內容框應該是100％或100vh，因爲它是父級，但是這會使120vh，所以它必須只是80vh，因此所有元素一起將只覆蓋100vh！ – ToTaTaRi

我上面編輯了我的答案，只是嘗試一下代碼......我在那裏看不到任何問題！？ – ToTaTaRi

100％高度身體比100vh高，引起角的路由器出口

回答

相關問題