css上下两栏一栏定高（css设置上下边框）

CSS上下两栏一栏定高是一个常见的网页布局需求。下面我们将介绍如何实现这种布局。

.container {
    display: flex;
    flex-direction: column;
    height: 500px;
}
.top {
    flex: 1;
    background-color: #ccc;
}
.bottom {
    height: 100px;
    background-color: #ddd;
}
    

首先我们需要创建一个容器元素，并设置其为flex布局，使其内部子元素能够自适应高度。然后我们给容器元素设置一个固定的高度。容器内部包含两个子元素，我们分别给它们设置类名。这里我们使用了flex-grow属性将顶部元素自适应布满剩余空间，而底部元素则直接设置固定高度。

通过以上代码，我们就可以实现CSS上下两栏一栏定高的布局了。这种布局适用于很多场合，比如网站的页脚、导航栏等等。如果你还有其他布局需求，也可以尝试使用flex布局等CSS技术来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！