在前端开发中，经常会遇到需要让某个元素填满整个屏幕高度的情况，特别是主内容区域。本文将介绍如何使用 CSS 来实现这一需求。
方法一：使用绝对定位
首先，我们可以使用绝对定位来让主内容 div 填充整个屏幕：
-- -------------------- ---- ------- ----- ---- - ------- ----- - ------------- - --------- --------- ---- -- ------- -- ----- -- ------ -- -
这里，我们通过设置 html 和 body 元素的高度为 100% 来让它们占据整个屏幕高度。然后，我们将 #main-content 元素的位置设置为绝对定位，并将其上下左右坐标都设置为 0。这样，#main-content 元素就会填充整个屏幕高度。
这种方法的优点是简单易懂，适用于大多数情况。但是，它存在一些缺点。例如，如果页面内容太长，超出了屏幕高度，那么 #main-content 元素就会被裁剪掉。
方法二：使用 flexbox
另一种方法是使用 CSS3 引入的 flexbox 布局。它能够更好地控制元素的尺寸和位置，适用于更复杂的布局。
-- -------------------- ---- ------- ----- ---- - ------- ----- - ------------- - -------- ----- --------------- ------- ------- ----- - ------------- - ----- -- -
这里，我们通过设置 #main-wrapper 元素的 display 属性为 flex，将其子元素按指定方向排列。然后，我们将 #main-content 元素的 flex 属性设置为 1，让它占据剩余空间。这样，#main-content 元素就会填充整个屏幕高度。
这种方法的优点是灵活性更强，可适用于更多情况。但是，它需要一些了解 flexbox 的知识，不太适合初学者。
总结
以上两种方法都可以让主内容 div 填充整个屏幕高度，具体选择哪种方法需要根据实际情况进行判断。如果页面比较简单，建议使用第一种方法；如果页面较为复杂，建议使用第二种方法。
示例代码：Codepen
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13835