css如何实现满屏 |css如何控制边距

html, body {
margin: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 50px; /* 或者是底部footer的高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}

如上所示，大家通过为html和body元素设置height: 100%，使得它们占据整个屏幕高度。接着，大家为具有.main类的元素设置min-height: 100%。这样一来，如果内容太少无法撑满整个屏幕，该元素也会自动扩展到屏幕的高度，并填充整个可用区域。

但是，如果您不想让内容固定在底部，该怎么办？这时，您可以使用.footer类。通过设置position: relative和bottom: 0属性，将.footer定位在页面底部。然后，再将其高度设置为您需要的高度，如50px。

最后，如果您想在.content元素中添加一些内边距以获得更好的外观效果，请不要忘记将padding-bottom属性设置为.footer元素的高度，否则您的网页内容将覆盖在.footer之上，看起来不太美观。

在实现满屏的过程中，这些简单的CSS技巧都可为您提供强大支持。大家希望您能尝试使用它们，以创建美丽且功能完备的网页。