将 div 设置为 100% 的内容

Question

我正在使用 1140px 流体网格 (cssgrid.net) 布局。

我遇到了一些问题..

我的布局是这样的：

Side Menu - Content
          - Content
          - Content
          - Content
          - etc. etc.

我的问题是，我的布局是这样的：

Side Menu - Content
Content
Content
Content
Content
etc. etc.

我想要，所以我的“侧边菜单”是全高的，所以它会将内容推到“右侧”。

我的布局（共 12 列）：

<div class="container">

  <div class="row">
    <div class="twocol">
    -- Side Menu Content Here --
    </div><!-- END 2col --> 

    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
  </div><!-- END .row -->  
</div><!-- END .container -->

CSS 是：

.container {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 4.85%;
}

.row .twocol {
width: 13.45%;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 56.75%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}

我希望你能帮助我。谢谢。

Answer 1

你的布局看起来是这样的：

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | |                                       | |
| |              | |                                       | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
+------------------------------------------------------------+

不要重复那十列的内容。将其保留为包装器并使用较小的 div。像这样：

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | | +-----------------------------------+ | |
| |              | | |                                   | | |
| +--------------+ | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  +---------------------------------------+ |
+------------------------------------------------------------+

如果你想要 HTML 代码，

<div class="container">

    <div class="row">
        <div class="twocol">
        -- Side Menu Content Here --
        </div><!-- END 2col --> 

        <div class="tencol last">
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
        </div> 
    </div><!-- END .row -->  
</div><!-- END .container -->

希望对你有帮助！

Answer 2

您可以将height: 100% 添加到 menu-div (twocol)。应该这样做。

无论如何：也许稍微改变一下div的结构会更好：

<div class="menu">
-- Side Menu Content Here --
</div>

<div class="content">
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
</div>

根据我的经验，当您拥有包含菜单、内容、页眉和页脚的单独 div 时，它会使布局更容易。

当您使用浮动时，我经常在开发过程中为我的 div 设置背景色，这样我就可以看到它们占用了多少空间（尤其是高度）。因为一旦 div 结束，所有左侧浮动的 div 将尽可能向左移动。

Answer 3

我刚刚在 jsfiddle (http://jsfiddle.net/cXXGj/) 上做到了。我认为你需要这种方式。我只是用 class content_container 将内容包装在另一个 div 中。看看小提琴：http://jsfiddle.net/cXXGj/