Question

我有一个三行，一列的网站设计，我想让中心内容div调整大小以适应列的其余部分（屏幕高度 - （硬编码的footerheight +硬编码标题高度））。用CSS做一个可爱的方法吗？如果没有，我怎么能用javascript完成这个？

谢谢，

汤姆

#container {
  background-color: gray;
  height: 100%;
}
#centercolumn {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  height: 100%;
}
#header {
  background-color: blue;
  height: 150px;
}
#content {
  background-color: yellow;
}
#footer {
  height: 50px;
  background-color: blue;
}

<html>
  <head>
    <link rel="stylesheet" href="test.css" type="text/css" media="screen"/>
  </head>
  <body>
    <div id="container">
      <div id="centercolumn">
        <div id="header">
          header
        </div>
        <div id="content">
          content
        </div>
        <div id="footer">
          footer
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

Sticky Footer会让你自由。

根据用户监视器的大小/分辨率动态调整div的高度

1 个答案: