如何將css高度與瀏覽器窗口的大小對齊？

好的，所以我想放置一個視頻，使它的高度是瀏覽器窗口的100％，但不是視頻，所以視頻高度不是1080px（帶滾動條），而是高度相對於瀏覽器窗口的高度是。這裏是我當前的風格（它的工作原理）：如何將css高度與瀏覽器窗口的大小對齊？

video { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 100%; 
}

我想它看起來就像這樣：

--Meaning沒有空白，沒有滾動條。我已經嘗試了視口高度CSS屬性，但這會導致滾動條。前面提到的代碼產生了我正在尋找的結果，但這是一種非常低效的方式來做這樣一個簡單的事情，我不知道它是否會在其他瀏覽器中顯示相同的方式。這是live ...
是否有JavaScript替代方案？或者更好，但純粹的CSS？

來源

2017-07-18 Henry7720

您可以定義與上海社會科學院的縱橫比。 – Timothy

Rick Astley不是最好的例子;）。另外你爲什麼使用4：3視頻？ – Timothy

我想要圖片中所示的兩側黑色邊框，但不是頂部。 – Henry7720

Alohci解釋說，我應該使用vertical-align: top;從Scott Marcus和Timothy刪除滾動條，從他的幫助和答案。所有收到的答案都是有幫助的，併爲最終答案提供了見解here。
所以，我以前 CSS：

body { 
    background-color: #000000; 
} 

video { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 100%; 
}

而且我新 CSS：

body { 
    background-color: #000000; 
    margin: 0; 
    text-align: center; 
} 

video { 
    vertical-align: middle; 
    height: 100vh; 
}

來源

2017-07-19 01:19:36 Henry7720

文檔的正常流程中元素的高度僅在祖先元素的高度明確設置時纔有效。

但是，跳過所有這一切，將其設置爲視口高度的100％：

height:100vh;

來源

2017-07-18 22:18:19

我測試過「video {text-align：center; height：100vh;}」，並且它還是導致了一個滾動條。 – Henry7720

@ Henry7720 - 文本對齊需要位於包含的塊元素（即主體）上，而不是視頻元素。要擺脫滾動條，請使用'video {vertical {align：top;}' – Alohci

@ Henry7720另外，請記住，box-model中的默認大小是在設置時不考慮填充，邊框和邊距元素的「高度」或「寬度」。 –

復位機構和HTML標記，那麼你可以使用100％，並獲得真正的100％的高度和寬度。

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

 
      } 
 
#fullscreen-video{ 
 
    width:100%; 
 
height:100%; 
 
    background-color:green; 
 
    overflow:hidden; 
 
}

<div id="fullscreen-video"> 
 
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe> 
 
</div>

來源

2017-07-18 22:33:08 Timothy

對'html，body'設置'width：100％'沒有任何區別，因爲這是默認值，如果'fullscreen-video'有更多的祖先圖層，那麼每個元素都必須設置其「height」如果使用百分比。 –

如何將css高度與瀏覽器窗口的大小對齊？

回答

相關問題