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

问题描述：

我一直在使某个网站变得无聊，并且在主页上（并且最终会在每个页面上）一个页脚，就像在stackoverflow上的一样，在主页上有一个标题，顶部的一段文字，主要部分和页脚。当您调整页面大小时，我希望主div扩展，最小高度为500px。根据浏览器的大小调整div容器的大小，当它下面有一个页脚时

到目前为止，我已经试过代码：

.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之间。当我继续向下滚动时，而不是显示页脚上方的这个间隙，它会变得更远。添加代码位置：固定不会有任何帮助。我宁愿使用HTML，CSS或jQuery来解决这个问题，但如果需要的话，我可以使用其他语言。

你需要的，如果你需要帮助，与我们分享更多的代码。 –

请为我们的实验创建一个活塞或codepen，将会更容易找到正确的解决方案 –

答

我对你的确切情况并不积极，但我相信我能提供帮助。我解释你的问题意味着你想要主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容器的大小，当它下面有一个页脚时

相关推荐