CSS 让页面主体的高度占满整个浏览器窗口

在本文中，我们将介绍如何使用CSS使页面主体的高度占满整个浏览器窗口。在Web设计中，经常会遇到需要让页面主体填满浏览器窗口的需求，这样可以确保页面在任何设备上都能够完整显示，提供更好的用户体验。

阅读更多：CSS 教程

方法一：使用vh单位

vh是一种视窗高度单位，表示相对于视窗高度的百分比。通过将页面主体的高度设置为100vh，我们可以确保它占满整个浏览器窗口。

示例代码如下：

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

上述代码将页面主体(body)的高度设置为100vh，并将页面边距和内边距都设为0，以确保主体填充整个浏览器窗口。

请注意，如果页面中存在其他元素（如页眉、页脚等），它们的高度不会计入页面主体的高度。如果需要考虑这些元素，可以使用calc()函数进行计算。

示例代码如下：

body {
  height: calc(100vh - 100px); /* 去除100px的页眉高度 */
  margin: 0;
  padding: 0;
}

header {
  height: 100px; /* 页眉高度 */
}

上述代码中，使用calc()函数计算出页面主体的高度为100vh减去100px的页眉高度。

方法二：使用flex布局

flex布局是一种强大的CSS布局技术，可以轻松实现页面主体占满整个浏览器窗口。

示例代码如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

header, footer {
  height: 50px; /* 页眉和页脚的高度 */
}

上述代码中，将html和body元素的高度设为100%以确保它们填满整个浏览器窗口。然后通过display:flex和flex-direction:column将body元素设置为纵向布局，使得页面主体(main)自动占满剩余的空间。

方法三：使用绝对定位

使用绝对定位的方式也可以实现让页面主体占满整个浏览器窗口。

示例代码如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

上述代码中，将html和body元素的高度设为100%以填满整个浏览器窗口。然后将页面主体(main)元素使用绝对定位，设置top、left、right和bottom属性都为0，使其占满整个浏览器窗口。

方法四：使用overflow属性

还可以使用overflow属性来实现让页面主体占满整个浏览器窗口。

示例代码如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  margin: -8px; /* 去除body的默认边距 */
  padding: 8px; /* 添加一个与body默认边距相同的内边距 */
}

main {
  height: 100%;
  overflow: auto;
}

上述代码中，将html和body元素的高度设为100%以填满整个浏览器窗口，并使用overflow:hidden隐藏滚动条。然后为body添加一个与默认边距相同的负边距，再添加一个与默认边距相同的内边距，以弥补去除默认边距带来的影响。最后，将页面主体(main)的高度设为100%，并使用overflow:auto显示滚动条，确保页面内容超出窗口高度时可以滚动。

总结

通过以上几种方法，我们可以轻松实现让页面主体占满整个浏览器窗口的效果。无论是使用vh单位、flex布局、绝对定位还是overflow属性，都可以根据具体情况选择最适合的方式。只要我们理解了这些CSS技术，并根据实际需求进行灵活应用，就能够实现一个占满整个浏览器窗口高度的页面主体，提供更好的用户体验。