如何讓html的內容占據整個瀏覽器window？

Question

我在 html 頁面中有以下 div，該頁面嘗試從不同的 html 頁面呈現內容。 渲染的 html 內容占據整個寬度，但不占據高度。 樣式屬性中需要更改什么以占據整個可用高度？

謝謝！

<div>
    <embed type="text/html" style="text-align:center;width:100%;height:100%"
       src="https://app.mytest.com/common/mydocuments.html">
</div>

Answer 1

嗯，在 CSS 中有很多方法可以實現這一點，但我喜歡用來實現這一點的方法是使用完整的視口高度和寬度。

embed {
  height: 100vh;
  width: 100vw;
}

它基本上告訴瀏覽器為此標簽使用整個 window。

並使其修復，您可以使用position: fixed;

Answer 2

對於 Html 內容占據整個頁面只需將 min-height 設置為 100vh。我附上了示例代碼供您參考，也請參閱提供的鏈接以進一步了解https://www.freecodecamp.org/news/html-page -寬度-高度/

 <style> body { min-height: 100vh; max-width: 400px; margin: 0 auto; background-color:blue; } </style> <div> <h class="body">Sample Text <h> <div>