css上栏定高下栏自适应

如果我们想要在网页的顶部放置一个固定高度的导航栏，与其下方的内容区域自适应高度，我们可以使用CSS来实现这个效果。

首先，我们需要将导航栏固定在文档流的顶部，使用position:fixed属性：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 设置导航栏高度为50px */
}

然后，我们可以将内容区域使用相对定位，再通过margin-top属性来让它在导航栏下方：

main {
  position: relative;
  margin-top: 50px; /* 在导航栏下方预留50px的空间 */
}

这样我们就成功地创建了一个上栏定高下栏自适应的页面布局。