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技术来实现。