Css 如何为DIV的全高设置背景色？

我的Ruby-on-Rails应用程序使用BootStrap来简化布局渲染。我定义行和列：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 left_border">
      <ul class="" role="menu">
        <li><%= link_to t('Groups'), groups_path %></li>
        <li><%= link_to t('Users'), users_path %></li>
        <li><%= link_to t('Parameters'), "#" %></li>
      </ul>
    </div>
    <div class="col-md-8 col-md-offset-1">

      <%= yield %>

      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>"><%= value %></div>
      <% end %>

    </div>
  </div>
</div>

它工作正常，但第一列的背景仅为其内容设置，而不是为整个单元格设置。如果函数返回很多行，我会在左边得到一个小的灰色框，包括菜单，在这里我想显示一个完整的灰色列。

---

感谢您的帮助。

我终于切换到css3柔性箱功能，它提供了一种设计电网的智能方法：

1-我在css文件中创建了所需的类

/* flex containers */
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: white;
  }

.flex-container-v {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: white;
  }

.flex-item {
  background-color: white;
  margin-left: 10px;
  width: 80%
  }

.flex-item-border {
  background-color: lightgrey;
  width: 20%;
  }

2-我使用这些类组织我的显示块

   <div class="flex-container-v">
     <div class="flex-container">
        <div class="flex-item-border logo">
                <br/>
                <%= image_tag("k.png", alt: "KeyMan") %>
                <br/>
        </div>
        <div class="flex-item">
                <nav class="top_menu">
                    <ul>
                        <% if user_signed_in? %>
                        <li> <%= t('User') %>: <%= link_to (current_user.first_name + ' ' + current_user.name), edit_user_registration_path %></li>
                        <li> | <%= link_to t('Sign_out'), destroy_user_session_path, method: "delete" %></li>
                        <% else %>
                        <li> <%= link_to t('Sign_in'), new_user_session_path %></li>
                        <% end %>
                        <li> | <%= link_to t('Help'), "#" %> </li>
                    </ul>
                </nav>
                <h1><%= t('Cryptographic Keys Manager') %></h1>             </div>
        </div>
...

:
|

|

...

---

而且效果很好

尝试给出or.left_border{背景色：#ccc；}您确定该列本身有您想要的高度吗？如果没有，请尝试向柱添加测试临时边界。或者，只需使用浏览器开发工具查看列区域。根据dom上下文的不同，表的高度可以是100%或类似的值。说明高度：100%无效。这可能与内容的后期包含有关吗？

   <div class="flex-container-v">
     <div class="flex-container">
        <div class="flex-item-border logo">
                <br/>
                <%= image_tag("k.png", alt: "KeyMan") %>
                <br/>
        </div>
        <div class="flex-item">
                <nav class="top_menu">
                    <ul>
                        <% if user_signed_in? %>
                        <li> <%= t('User') %>: <%= link_to (current_user.first_name + ' ' + current_user.name), edit_user_registration_path %></li>
                        <li> | <%= link_to t('Sign_out'), destroy_user_session_path, method: "delete" %></li>
                        <% else %>
                        <li> <%= link_to t('Sign_in'), new_user_session_path %></li>
                        <% end %>
                        <li> | <%= link_to t('Help'), "#" %> </li>
                    </ul>
                </nav>
                <h1><%= t('Cryptographic Keys Manager') %></h1>             </div>
        </div>
...