設置高度等於瀏覽器高度

-2

我們正面臨高度問題。我們希望使頁面高度達到瀏覽器視圖的100％，但是如果將高度設置爲100％，那麼滾動條就在那裏。設置高度等於瀏覽器高度

如果將截面高度設置爲90％左右，則滾動條會隱藏在某個屏幕中，但不會全部隱藏。標頭的固定高度（50px）。有沒有什麼辦法根據瀏覽器的高度來得到確切的百分比？

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

 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:100%; 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

來源

2016-07-27 Muhammad Ali Hassan

包含問題本身重現問題所需的最少代碼。 – Pugazh

您可以在body做overflow:hidden;，或者你可以使用calc代替：

height:calc(100% - [height of navbar]);`

所以你的CSS：

#content { 
    height:calc(100% - 50px); 
}

html,body {margin:0;height:100%;width:100%;} 
 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:calc(100% - 50px); 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

html,body {margin:0;height:100%;width:100%;overflow:hidden;} 
 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:100%; 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

來源

2016-07-27 13:54:38 Albzi

謝謝，這是我想要的 –

CSS

.my-div{ 
    height: 100vh; 
}

來源

2016-07-27 13:52:14

這將刪除您的上限我猜。 – Pirate

要解決這一點，你可以使用overflow: hidden

<body style"height:100%; overflow:hidden;">

希望這將有助於。

來源

2016-07-27 13:52:16 Pirate

你可以嘗試把

體
{
高度：100vh;
}

高度將爲屏幕（視口）的100％高度。

你可以提供jsfiddle鏈接，如果它仍然不工作？

來源

2016-07-27 13:54:26 Abhishek

設置高度等於瀏覽器高度

回答

相關問題