请问css布局整个窗口上下布局

上面270px
下面自适应
请问怎么写？

<!DOCTYPE html>
<html>
  <head>
    <style>
    html,body {
      margin: 0;
      padding: 0;
    }
    .top {
        height: 270px;
    }
    .bottom {
        position: absolute;
        top: 270px;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        width: auto;
    }
    </style>
  </head>
  <body>
    <div class="top" style="background: red;"></div>
    <div class="bottom" style="background: blue;"></div>
  </body>
</html>

如果是ie8+兼容用content-box就很好做

1、table实现
2、百分比
3、js自己实现，下面的高度=整个高度-上面的高度

除去上边说的，还可以使用：
1. 绝对定位
2. html body 的 height设置为100%，然后body的padding-top设置270，加上box-sizing:border-box，此时设置你的下边元素高度设置为100%就可以了；那上边的元素可以绝对定位可以相对定位还可以利用负margin 把他弄上去就可以了
3. 2的变种，利用css的 calc

我没读懂题主的意思，意思是单栏布局，上边距为270像素？

【热门文章】