铺满窗口css

CSS（层叠样式表）是一种用于美化 HTML 页面的语言。它使我们能够轻松将不同的样式应用于不同的元素，如字体、颜色、大小等。在这篇文章中，我们将会学会如何使用 CSS 来铺满窗口。

假设我们有一个网页元素（例如一个 div 元素），它的宽度和高度是固定的，但我们希望它能够铺满整个窗口。

/*HTML*/div class="wrapper">
    p>
    这是一个示例的 div 元素。/p>
    /div>
/*CSS*/body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 500px;
    height: 300px;
    background-color: #ccc;
    margin: 0 auto;
}
@media only screen and (min-width: 500px) {
.wrapper {
    width: 100%;
    height: 100%;
}
}
    

以上代码中，我们首先设置 body 和 html 元素的高度为 100%，并将边距和填充设置为 0。这是因为默认情况下，body 和 html 元素有一些边距和填充，我们需要把它们去掉。

接下来，我们给 .wrapper 元素设置了一个固定的宽度和高度，同时设置了一个背景颜色。这个 div 元素应该是没有充满整个屏幕的。

最后，我们使用媒体查询来检查视口的宽度是否大于等于 500 像素。如果是，就将 .wrapper 元素的宽度和高度设置为 100%，这样它就可以铺满整个屏幕了。

现在我们可以将上述代码复制到你的HTML和CSS文档中，并且按Ctrl+S键来保存它们。浏览器刷新后，div 元素将铺满整个窗口。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！