Установите div на 100% контента

Question

Я использую компоновку жидкой сетки 1140px (cssgrid.net).

У меня возникли некоторые проблемы ..

Моя раскладка выглядит следующим образом:

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

Моя проблема в том, что мой макет делает так:

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

Я хочу, так мое «Боковое меню» - это полная высота, поэтому он будет подталкивать контент к «правильному».

Моя раскладка (Exist 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      |     | 
| |          |     | 
| +---------------------------------------+     | 
+------------------------------------------------------------+ 

Не повторять, что десять содержание COL. Храните его в качестве обертки и используйте более мелкие 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 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> 

Я мой опыт это делает Оформление печатных изданий легче, когда у вас есть раздельные дивы, содержащие меню, контент, верхний и нижний колонтитулы.

Когда вы используете float, я часто устанавливаю backgroudcolor для своих divs во время разработки, поэтому я могу видеть, сколько места они занимают (особенно высота). Поскольку, как только div заканчивается, все оставшиеся поплавковые div будут идти так далеко, насколько это возможно.

Answer 3

Я просто сделал это здесь, на jsfiddle (http://jsfiddle.net/cXXGj/). Думаю, вам нужно именно так. Я просто обернул содержимое внутри другого div классом content_container. Посмотрите на скрипку: http://jsfiddle.net/cXXGj/