我不太确定如何问这个问题。我想要做的是在我的页面底部有一个元素，该元素将始终粘在底部，但如果页面太短，它将被页面上的其他元素向下推。
示例:
左侧中间图形和右侧标题都包含在#mainBodyContent 中。如果浏览器窗口足够小以至于这个 div 会碰到“Latest in Geek”flash 框，我希望将 flash 框向下推。但是，如果#mainBodyContent 没有运行到闪光框，我希望闪光框粘在它当前所在位置的底部。我对如何实现它感到很困惑。
有什么建议/帮助吗？我说得有道理吗？
最佳答案
您可以结合使用绝对定位和填充。例子可以在这里看到:
<html>
<head>
<style type="text/css">
html, body { height:100%; }
/* layout */
#container {
width:800px; margin: 0px auto;
position: relative; min-height: 100%;
}
#top { height: 12px; } /* margin on header breaks liquid layout */
#header { position: relative; }
#content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */
#footer {
clear: both;
position:absolute;
bottom: 0px;
width:100%;
height:60px;
text-transform: uppercase;
background-color: red;
}
.section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="header">
<h1>Title</h1>
</div><!-- end header div -->
<div id="content">
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end content div -->
<div id="footer">Footer content here</div>
</div><!-- end container div -->
</body>
关于javascript - 让一个 div 有一个最顶层的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4868675/