최소 높이로 높이를 수정합니다.

웹 페이지를 디자인했지만 지금은 대답을 찾을 수 없다는 나쁜 문제가 있습니다. HTML 태그는 아래와 같다 :최소 높이로 높이를 수정합니다.

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    </head> 

    <body> 

     <div class="strip"> 
      <div class="menu-item-holder"> 
       <div class="menu-item"> 
        item1 
       </div> 
       <div class="menu-item"> 
        | 
       </div> 
       <div class="menu-item"> 
        item2 
       </div> 
       <div class="menu-item"> 
        | 
       </div> 
       <div class="menu-item"> 
        item3 
       </div> 
       <div class="menu-item"> 
        | 
       </div> 
       <div class="menu-item"> 
        item4 
       </div> 
      </div> 
     </div> 

     <div class="body"> 

      <div class="context"> 

       <div class="header"> 

       </div> 

       <div class="sticky-menu"> 

        <div class="menu-item-holder"> 

         <div class="menu-item"> 
          item1 
         </div> 
         <div class="menu-item"> 
          | 
         </div> 
         <div class="menu-item"> 
          item2 
         </div> 
         <div class="menu-item"> 
          | 
         </div> 
         <div class="menu-item"> 
          item3 
         </div> 
         <div class="menu-item"> 
          | 
         </div> 
         <div class="menu-item"> 
          item4 
         </div> 

        </div> 

       </div> 

       <div class="upper-divs"> 

        <div class="up-left-div"> 

        </div> 

        <div class="up-right-div"> 

        </div> 

       </div> 

       <div class="left-block"> 

       </div> 

       <div class="middle-block"> 

        <div class="post"> 

        </div> 

        <div class="post"> 

        </div> 

        <div class="post"> 

        </div> 

        <div class="post"> 

        </div> 

        <div class="post"> 

        </div> 

        <div class="post"> 

        </div> 

       </div> 

       <div class="right-block"> 

       </div> 

      </div> 

      <div class="footer"> 

      </div> 

     </div> 

    </body> 
    </html> 

And the style is like this: 

    @charset "utf-8"; 
    /* CSS Document */ 

    .body{ 
     width:1000px; 
     height:100%; 
     min-height:1600px; 
     background:#cccccc; 
     direction:rtl !important; 
     text-align:right !important; 
     margin:0 auto; 
     padding-top:40px; 
    } 

    .strip{ 
     width:100%; 
     min-height:50px; 
     background:#212121; 
     direction:rtl !important; 
     text-align:center !important; 
     margin:0 auto; 
     position:absolute; 
     left:0px; 
     top:0px; 
    } 

    .menu-item-holder{ 
     margin:0 auto !important; 
     text-align:center; 
     padding:11px; 
    } 

    .menu-item{ 
     display:inline; 
     direction:rtl; 
     color:#fff; 
    } 

    .context{ 
     background:#a0a0a0; 
     width:86%; 
     height:100%; 
     min-height:1350px; 
     direction:rtl !important; 
     text-align:right !important; 
     margin:0 auto; 
    } 

    .footer{ 
     width:99.8%; 
     min-height:200px; 
     background:#212121; 
     direction:rtl !important; 
     text-align:right !important; 
     margin:0 auto; 
    } 

    .header{ 
     width:99.8%; 
     min-height:350px; 
     background:#ec2327; 
     direction:rtl !important; 
     text-align:right !important; 
     margin:0 auto; 
    } 

    .sticky-menu{ 
     width:99.8%; 
     min-height:50px; 
     background:#212121; 
     direction:rtl !important; 
     text-align:right !important; 
     margin:0 auto; 
     text-align:center; 
     padding-top:11px; 
    } 

    .upper-divs{ 
     margin-top:5px; 
     width:99.8%; 
     min-height:206px; 
    } 

    .up-left-div{ 
     width:49%; 
     min-height:200px; 
     background:white; 
     float:left; 
    } 

    .up-right-div{ 
     width:49%; 
     min-height:200px; 
     background:white; 
     float:right; 
    } 

    .left-block{ 
     width:18%; 
     min-height:200px; 
     background:white; 
     float:left; 
    } 

    .middle-block{ 
     width:61.8%; 
     min-height:200px; 
     background:black; 
     float:left; 
     margin-left:1%; 
     margin-right:1%; 
    } 

    .right-block{ 
     width:18%; 
     min-height:200px; 
     background:white; 
     float:left; 
    } 

    .post{ 
     width:98%; 
     min-height:200px; 
     background:red; 
     float:left; 
     margin:5px;; 
    }

그리고 지금 그 결과는 이것이다 :

result

내가 알고 싶은

, 왜 body 클래스의 DIV의 높이와 div의 context 클래스가 자녀와 일치하지 않는 이유는 무엇입니까? middle-block의 div은 자식이 있습니다. 감사합니다.

출처

2014-07-05 ConductedClever

overflow: auto;

.context{ 
    background:#a0a0a0; 
    width:86%; 
    height:100%; 
    min-height:1350px; 
    direction:rtl !important; 
    text-align:right !important; 
    margin:0 auto; 
    overflow: auto; 
}

출처

2014-07-05 06:21:52

당신의 대답은 excelent이었다 약간 변경 -과 시도 ... 난 내 코드에 이상 변화가 필요 말은 모든 일이 해결되었습니다! 정말 고맙습니다 ;) – ConductedClever

부모 만들기 : 디스플레이 : 인라인 블록; 및 아이들 : 전시 : 인라인; 부모가 가장 긴 아이에게 스트레칭하기를 원한다면 테이블을 표시하고 표 셀을 표시 할 수 있습니다.

출처

2014-07-05 06:16:37

오버플로 추가 : .context에 숨김. 그것은 높이보다 더 많은 시간을합니다 : 100 %. 동일하게 .body에도 적용됩니다.

출처

2014-07-05 06:21:37

최소 높이로 높이를 수정합니다.

답변

관련 문제