将div设置为内容的100％

Question

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

我有一些问题..

我的布局是这样的：

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

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

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

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

我的布局（12周的cols存在）：

<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      |     | 
| |          |     | 
| +---------------------------------------+     | 
+------------------------------------------------------------+ 

不要重复10项山坳内容。保持它作为包装并使用较小的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，内容，页眉和页脚。

当你使用float时，我经常在开发过程中为我的div设置一个backgroudcolor，所以我可以看到它们占用了多少空间（尤其是高度）。因为div一旦结束，所有剩下的浮动div就会尽可能地离开。

Answer 3

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