使用CSS和HTML使主要内容div填充屏幕高度
当我们设计一个网页时，常常希望网页主要内容div能够自适应屏幕高度，使用户能够更加方便的浏览网页内容，那么如何使用CSS和HTML来实现呢？下面我们将一步步来讲解。
设置主要内容div的高度
首先，在HTML中，我们需要设置主要内容div的高度为100%。
<div class="main-content"></div>
在CSS中，我们需要将body和html的高度都设置为100%。
html, body{
height: 100%;
}
接着，将主要内容div的高度也设置为100%。
.main-content{
height: 100%;
}
这样，我们已经完成了主要内容div的高度设置，但是此时我们会发现，主要内容div的高度并没有占满整个屏幕，还有一些多余的空白。
设置主要内容div的box-sizing
这是因为默认情况下，元素的大小是由其内容（content）+边框（border）+填充（padding）决定的，因此我们需要通过设置主要内容div的box-sizing属性，使其大小包括内容、边框和填充。
.main-content{
height: 100%;
box-sizing: border-box;
}
这样，主要内容div的大小就包括了边框和填充，但是仍然存在问题：
- 当屏幕尺寸过小时，主要内容div的高度会溢出，导致出现滚动条；
- 当屏幕尺寸过大时，底部会出现一片空白区域。
为了解决这些问题，我们需要使用Flex布局。
使用Flex布局
Flex布局是一种常见的网页布局方式，它可以帮助我们更加方便的实现自适应屏幕高度。
首先，将父元素（即body）设置为Flex容器。
body{
display: flex;
flex-direction: column;
}
这里的"flex-direction: column"表示Flex布局方向为垂直方向。接着，将主要内容div设置为Flex子元素。
.main-content{
height: 100%;
box-sizing: border-box;
flex: 1;
}
这里的"flex: 1"表示主要内容div占据Flex容器的剩余空间。最后，设置header和footer为固定高度。
header{
height: 50px;
}
footer{
height: 50px;
}
这样，我们就完成了主要内容div填充屏幕高度的效果。
完整代码
综合以上内容，下面是完整的HTML和CSS代码。
HTML代码：
<body>
<header>Header</header>
<div class="main-content"></div>
<footer>Footer</footer>
</body>
CSS代码：
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
header{
height: 50px;
}
footer{
height: 50px;
}
.main-content{
height: 100%;
box-sizing: border-box;
flex: 1;
}
总结
通过上述步骤，我们可以使用CSS和HTML来实现主要内容div自适应屏幕高度的效果，让用户更加方便的浏览网页内容。同时，我们也了解到了Flex布局的使用方法，为网页布局提供了更多的选择。