首页css设置body全屏

css设置body全屏

时间: 2024-09-24 14:19:49 浏览: 57

要在CSS中让整个`<body>`标签呈全屏显示，你可以使用媒体查询（Media Queries）配合百分比布局或者CSS Flexbox或Grid布局。这里提供两种常见的方法： 1. **百分比高度**: 如果你想基于视口的高度设置全屏，可以这样写： ```css body { height: 100vh; /* viewport height */ margin: 0; overflow: hidden; /* 防止滚动 */ display: flex; /* 或者 display: -webkit-flex (兼容老版本浏览器) */ justify-content: center; /* 中心对齐内容 */ align-items: center; /* 横向和纵向居中 */ font-size: calc(10px + 2vmin); /* 自适应字体大小 */ } ``` 2. **Flexbox 全屏容器**: 如果希望用Flexbox创建一个响应式的全屏容器，可以这样做： ```css html, body { margin: 0; padding: 0; height: 100%; display: flex; align-items: stretch; /* 确保垂直填充 */ justify-content: center; overflow: hidden; } main { display: flex; flex-direction: column; align-self: center; /* 子元素水平居中 */ } ``` 记得替换`main`或者其他合适的容器选择器来放置实际的内容。

阅读全文