css上下自适应布局

CSS是网页设计中最重要的一个方面。在日常的页面设计中，经常需要实现上下自适应布局。

上下自适应布局指的是页面中上下两个部分在不同分辨率下自适应调整高度，同时两个部分中的内容也可以自适应调整大小。

CSS中的自适应布局主要使用两个属性：height和min-height。其中，height属性设置元素的高度，而min-height属性设置元素的最小高度。通过对这两个属性的设置可以实现上下自适应布局。

代码示例：
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -75px;
}

.header {
  height: 75px;
  background-color: #333;
  color: #fff;
}

.content {
  padding-bottom: 75px;
}

.footer {
  height: 75px;
  background-color: #333;
  color: #fff;
}

在这个示例中，我们使用了一个.container容器和三个子元素：.header、.content和.footer。为了实现上下自适应布局，我们设置了.container的min-height为100%，然后在.header和.footer中设置了一个固定高度，为75px。在.content中，我们通过设置padding-bottom属性为75px来为.footer留出空间。

通过这种方式，我们可以实现一个简单的上下自适应布局，无论用户使用任何分辨率的设备，网页都能够良好地显示。