Html 如何放置最后一个引导'；页面底部的s行'；内容_Html_Css_Twitter Bootstrap

Html 如何放置最后一个引导'；页面底部的s行'；内容

html css twitter-bootstrap

Html 如何放置最后一个引导'；页面底部的s行'；内容,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用，我想将.container的最后一行放在页面内容的底部我尝试的第一件事是以下代码： <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .highlight {

我正在使用，我想将

.container

的最后一行

放在页面内容的底部
我尝试的第一件事是以下代码：
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .highlight {
        border: 1px solid red;
      }

      .push-to-bottom {
        position: absolute;
        bottom: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container highlight">
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
      <div class="row push-to-bottom text-center highlight">
        <div class="col-md-12">
          <button>Press me</button>
        </div>
      </div>
    </div>
  </body>
</html>


如您所见，我已将位置：相对属性添加到.container
元素中，因此现在宽度：100%
执行正确的操作，并将元素直观地放置在.container
中。但它仍然存在以下问题：

它不关心其他行
s，因此它可以与其他行的内容重叠
它仍然不会放在页面底部，而不仅仅是.container

如果没有与此问题相关的其他问题中建议的硬编码高度和宽度，如何实现这种行为？
您可以使用页脚
<footer id="footer" class="footer row">
        <div class="container">
        Your text or DOM here
        </div>
</footer>

您可以使用页脚
<footer id="footer" class="footer row">
        <div class="container">
        Your text or DOM here
        </div>
</footer>

你想要这样的吗@不仅是先发制人。我还希望最后一行
也位于页面底部。在这种情况下，您是否尝试过
位置：固定

？您想要这样的东西@不仅是先发制人。我还希望最后一行

也位于页面底部。在这种情况下，您是否尝试过position:fixed？
footer {
display: block;
bottom: 0px;
height: [depends by content]
right: 0%;
left: 0%;
position: fixed !important;
position: absolute;
top: expression((0-(footer.offsetHeight)+ (document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop? document.documentElement.scrollTop:document. body.scrollTop))+'px');
text-align: center;
visibility: visible;
}