网格布局容器中没有高度

Question

我正在为个人网站编写网格系统。其实，我的代码如下所示：

<div class="page"> 
     <div class="row"> 
      <div class="col span_1">Column 1, Row 1</div> 
      <div class="col span_1">Column 2, Row 1</div> 
      <div class="col span_1">Column 3, Row 1</div> 
      <div class="col span_1">Column 4, Row 1</div> 
     </div> 

     <div class="row"> 
      <div class="col span_4">Column 1, Row 2</div> 
     </div> 

     <div class="row"> 
      <div class="col span_1">Column 1, Row 3</div> 
      <div class="col span_1">Column 2, Row 3</div> 
      <div class="col span_1">Column 3, Row 3</div> 
      <div class="col span_1">Column 4, Row 3</div> 
     </div> 

     <div class="row"> 
      <div class="col span_1 expandable">Column 1, Row 4</div> 
      <div class="col span_3">Column 2, Row 4</div> 
     </div> 

     <div class="row"> 
      <div class="col span_1 expandable">Column 1, Row 5</div> 
      <div class="col span_2">Column 2, Row 5</div> 
      <div class="col span_1 expandable">Column 3, Row 5</div> 
     </div> 
    </div> 

这里是CSS：

.col { 
    border: 5px solid #333; 
    background-color: red; 
    float: left; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -moz-background-clip: padding-box !important; 
    -webkit-background-clip: padding-box !important; 
    background-clip: padding-box !important; 
} 

.page { 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1080px; 
} 

/* Phones */ 
@media screen and (max-width: 599px) { 
    .col { 
     margin-left: 1%; 
     padding: 0 1.5%; 
    } 

    .row .col:first-child { 
     margin-left: 0; 
    } 

    .span_1, .span_2, .span_3, .span_4 { 
     width: 100%; 
     margin-left: 0; 
    } 
} 

/* Tablets */ 
@media only screen and (min-width : 600px) and (max-width : 1023px) { 
    .col { 
     margin-left: 0.4%; 
     padding: 0 1.5%; 
    } 

    .span_1 { 
     width: 49.4%; 
    } 

    .span_2, .span_3, .span_4, .expandable { 
     width: 99.2%; 
    } 
} 

/* Desktop */ 
@media screen and (min-width: 1024px) { 
    .col { 
     margin-left: 1%; 
     padding: 0 1.5%; 
    } 

    .row .col:first-child { 
     margin-left: 0; 
    } 

    .span_1 { 
     width: 24.25%; 
    } 

    .span_2 { 
     width: 49.5%; 
    } 

    .span_3 { 
     width: 74.75%; 
    } 

    .span_4 { 
     width: 100%; 
    } 
} 

调整时，这是工作不错，但我有一个问题。页面和行类没有高度，所以我不能使用背景和填充。另外，我无法将填充设置为.col。我做什么错了？我该如何解决这个问题？

这里有一个小提琴来测试是否需要：http://jsfiddle.net/3qkVG/

Answer 1

以一窥Expanding a parent <div> to the height of its children

但是，如果你不希望出现滚动条使用溢出：隐藏，而不是汽车。