그리드 레이아웃 컨테이너의 높이가 없음

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에 패딩을 설정할 수 없습니다. 내가 뭘 잘못하고 있니? 이 문제를 어떻게 해결할 수 있습니까? 당신이 스크롤바를 사용 오버 플로우를 표시하지 않으 그러나 경우

Answer 1

http://jsfiddle.net/3qkVG/이 Expanding a parent <div> to the height of its children

엿볼을 가지고 : 대신 자동차의 숨겨진 여기

당신은 필요한 경우 테스트하는 바이올린이있다.