容器 div 不覆盖整个页面答案

【问题标题】：Container div not covering entire page容器 div 不覆盖整个页面
【发布时间】：2014-05-13 18:55:10
【问题描述】：

由于某种原因，我的container div 没有覆盖整个页面。值得注意的是，我正在使用 Bootstrap gem。如何让这个 div 占据整个 HTML 页面？

application.html.erb

<!DOCTYPE html>

<html>
<div class="container">
<head>
  <title>dylan e. richards</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <%= javascript_include_tag 'application' %>
  <%= javascript_include_tag :defaults %>
  <%= stylesheet_link_tag    "application", media: "all" %>


</head>
<body>
  <% flash.each do |name, msg| %>
       <%= content_tag(:div, msg, class: "alert alert-info") %>
  <% end %>

  <%= render 'layouts/navbar' %>
  <% if !current_user %>
    <%= link_to 'admin login', new_user_session_path, class: 'btn btn-default btn-xs' %> 
  <% else %>
    <%= link_to "logout", destroy_user_session_path, :method => :delete, class: 'btn btn-xs btn-default' %>


  <% end %>
  <%= yield %>


</body>
</div> <!-- END container -->
</html>

styles.css.scss

nav {
    margin-bottom: 10px;
    margin-top: 10px;
}

.navspan {
    width: auto;
    height:3px;
    background-color: #333;
    clear: both;
    margin-bottom: 10px;

}

.postdate {
    text-align: center
}

btn-primary {
    background-color: #000
}

.container {
    font-family: "Droid Serif", "serif";
    background-color: #FDFBF5;
}



.highlight {
    color: #1abc9c;
 }


.underline {
    color: #333;
    border-bottom: 1px solid #f39c12;
    border-width: 2px;
    padding-bottom: 3px;

}

 #post {
    margin: 0 auto;
    max-width: 42.5em;
 }


 .posttitle {

    text-align: center;
 }


.span {
    background-color: #f39c12;
    height: 1px;
    width: 100%;
    margin-bottom: 20px;
}

 .postdate {
    text-align: center;
    color: #999;
 }



 a:link {color:#16a085;}      /* unvisited link */
 a:visited {color:#2c3e50;}   /* visited link */
 a:hover {color:#1abc9c;}     /* mouse over link */
 a:active {color:#0000FF;}    /* selected link */

【问题讨论】：

我们需要查看输出的 HTML。
嗨，保利。输出 HTML 到底是什么？如果有帮助，我正在处理的页面是 dylanerichards.com 的索引
那里的容器有什么问题？你想让它触摸屏幕底部吗？
我希望容器覆盖整个浏览器窗口。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

将<div class="container">放在<body>标签之后，并移动相应的</div>标签，使其位于</body>内。

【讨论】：

【解决方案2】：

在</body>之前移动</div> 

【讨论】：

【解决方案3】：

你需要在body里面设置你的div“容器”，然后你

【讨论】：

【解决方案4】：

要在引导程序中填充整个页面，您需要在 div 上使用 container-fluid 类

<div class="container">

变成

<div class="container-fluid">

您还需要将您的 <div> 放入您的 <body> 中

【讨论】：