Question

我一直在制作一个无聊的网站，并且在主页上（最终会在每个页面上）有一个页脚，就像stackoverflow上的那个，并且在主页上有一个标题，一个部分顶部，主要部分和页脚的文本。我希望在调整页面大小时扩展主div，最小高度为500px。

到目前为止我尝试过的代码：

.tutorials {
    background: linear-gradient( 180deg, rgb(240,230,220), rgb(200,190,180) );
    min-height: 500px;
    height: 66%;
    left: 0;
    right: 0;
    margin-top: 0px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

即使此代码调整了主div的大小，但在主div扩展时，页脚文本也不会向下移动，这会阻止页脚文本。此外，如果我使页面小于最小高度然后向下滚动，而不是主div为500px而页脚位于其下方，因为我滚动div的顶部停留在固定的位置并使空白空间顶部文本和主要div之间。当我继续向下滚动时，不是显示页脚，而是在它之上的这个空隙得到进一步的展开。添加代码位置：fixed对任何方式都没有帮助。我更愿意使用HTML，CSS或jQuery来解决这个问题，但如果有必要我会对其他语言开放。

Answer 1

我对你的具体情况并不乐观，但我相信我可以提供帮助。我将你的问题解释为你希望主div扩展而页脚保持在它之下。您可以将页脚的位置设置为相对（position: relative;），然后使用clear: both;以确保它不会在其上方的任何div上运行。以下是它的实例：

#main{
  width: 70%;
  height: 20vw;
  float: left;
  text-align: center;
  background-color: orange; 
  min-height: 150px;
}

#side{
  width: 30%;
  height: 20vw;
  float: left;
  text-align: center;
  background-color: yellow;
  min-height: 150px;
}

#footer{
  width: 100%;
  clear: both;
  text-align: center;
  background-color: blue;
}

<html>
   <body>
     <div id="main"><h1>Main</h1></div>
     <div id="side"><h1>Side</h1></div>
     <div id="footer"><h1>Footer</h1></div>
   </body>
</html>

根据浏览器的大小调整div容器的大小，当它下面有一个页脚时

1 个答案: