如何让``容器始终填满整个屏幕？

如何确保全屏

无论内容大小如何，容器

实现全屏

具有不同内容大小的容器可能具有挑战性。但是，有一个可靠的解决方案可以始终如一地提供所需的结果。

解决方案：

以下 HTML 和 CSS 代码可确保一致的全屏

容器：

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>



    <div>
<p><strong>CSS 细分：</strong></p>
<ul>
<li>html, body：将高度设置为 100% 并删除任何边距，确保容器占据整个空间screen.</li>
<li>#wrapper：将最小高度设置为 100%，确保其垂直扩展至适合屏幕，即使内容很小。</li>
</ul>
<p><strong>兼容性：</strong></p>
<p>此解决方案适用于所有主要浏览器，包括 IE。为了在 IE 6 或更早版本中实现最佳显示，附加了 CSS 规则：</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

用法：

只需在文档中包含 HTML 和 CSS 代码，和任何

ID 为“wrapper”的元素将垂直扩展以占据整个屏幕，无论其内容大小如何。