콘텐츠가 100 % 외부에 표시됩니다.

주요 콘텐츠와 기본 콘텐츠 고정 너비 모두에 대해 높이를 100 %로 설정 했음에도 불구하고 주 콘텐츠 고정 너비 내에있는 하위 항목이 신장? 높이를 설정하면 안됩니다 : 100 %는 내부에 놓인 물건에 상대적으로 자랍니다. '콘텐츠'항목을 모두 떠 있기 때문에 그것은 당신의 'mainContent-fixedWidth'컨테이너의 모든 내용이 아니라고 브라우저에 표시되도록콘텐츠가 100 % 외부에 표시됩니다.

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
p 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 16px; 
 
    line-height: 19px; 
 
    color: #1e4164; 
 
    margin: 10px 10px; 
 
} 
 

 
.content-section-heading 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    color: #5c5c5c; 
 
    margin: 10px 10px; 
 
    font-weight: 600; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 36px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    line-height: 122px; 
 
    color: #1e4164; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
    margin-bottom: 70px; 
 
} 
 

 
header 
 
{ 
 
    height: 127px; 
 
    width: 100%; 
 
    background-color: #569ABD; 
 
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px; 
 
    position: relative; 
 
    z-index: 2; 
 
    
 
} 
 

 
#header-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    margin: 0 auto; 
 
} 
 

 
#header-fixedWidth img 
 
{ 
 
    margin-top: 3px; 
 
} 
 

 
#banner 
 
{ 
 
    width: 100%; 
 
    height: 772px; 
 
    display: block; 
 
} 
 

 
#main-content 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
    
 
} 
 

 
#mainContent-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.content 
 
{ 
 
    height:340px; 
 
    width: 220px; 
 
    background-color: white; 
 
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px; 
 
    float: left; 
 
    margin: 0px 0px 40px 30px; 
 
} 
 

 
.content #tempContentImage 
 
{ 
 
    height: 180px; 
 
    width: 222px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>OECTA Template</title> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" /> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <div id="header-fixedWidth"> 
 
       <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" /> 
 
      </div> 
 
     </header> 
 
     <div id="banner"> 
 
      <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" /> 
 
     </div> 
 
     <div id="main-content"> 
 
      <div id="mainContent-fixedWidth"> 
 
       <h1>Intranet</h1> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
       </div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

출처

2017-01-10 Theodore Steiner

아니요, 'height : 100 %'는 내용이 아닌 컨테이너를 기준으로합니다. –

원하는 것은 무엇입니까? 계층 구조 체인도 일반적으로 100 % 높이 'HTML'과 '몸'설정 %에 정의되어있는 경우 %에서

높이 만 잘 작동합니다 : 당신이 CSS에 익숙하지 않은 경우 여기에서 다른 까다로운 것이있다 여기처럼, 때로는 더 복잡하고 래퍼 또는 JS가 필요합니다
높이의 용어로 콘텐츠 흐름을 벗어나는 일종의 종류, 나 틀렸을 때 올바른지, 그들은 "텍스트에 머물러 있습니다. 라인을 넣으십시오. "컨테이너를 강제로 적용하려면 tou가"clearfix "를 수행해야합니다. 그것은 부동 요소 목록의 맨 끝에했던 것처럼 클래스에 div를 추가하는 것으로 구성됩니다. 이 클리어 픽스 클래스는 시대에 뒤떨어져 있을지도 모르지만, 얼마나 후방 지원을 원하는지에 따라 다양한 버전이 있습니다.
'높이 : 100 %'는 내용에 적용되지 않지만 최소 높이는 적용됩니다. 나쁜 소식은 후방 지원이 실제로 좋지 않다는 것입니다. 이것에 대한 완벽한 지원을 위해, 당신은

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body 
 
{ 
 
    height: 100%; 
 
} 
 

 
.clear{ 
 
    clear: both; 
 
    height: 0; overflow: hidden; /* Precaution pour IE 7 */ 
 
} 
 

 
p 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 16px; 
 
    line-height: 19px; 
 
    color: #1e4164; 
 
    margin: 10px 10px; 
 
} 
 

 
.content-section-heading 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    color: #5c5c5c; 
 
    margin: 10px 10px; 
 
    font-weight: 600; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 36px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    line-height: 122px; 
 
    color: #1e4164; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
    margin-bottom: 70px; 
 
} 
 

 
header 
 
{ 
 
    height: 127px; 
 
    width: 100%; 
 
    background-color: #569ABD; 
 
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px; 
 
    position: relative; 
 
    z-index: 2; 
 
    
 
} 
 

 
#header-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    margin: 0 auto; 
 
} 
 

 
#header-fixedWidth img 
 
{ 
 
    margin-top: 3px; 
 
} 
 

 
#banner 
 
{ 
 
    width: 100%; 
 
    height: 772px; 
 
    display: block; 
 
} 
 

 
#main-content 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    border: 1px solid black; 
 
    
 
} 
 

 
#mainContent-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    min-height: 100%; 
 
    margin: 0 auto; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.content 
 
{ 
 
    height:340px; 
 
    width: 220px; 
 
    background-color: white; 
 
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px; 
 
    float: left; 
 
    margin: 0px 0px 40px 30px; 
 
} 
 

 
.content #tempContentImage 
 
{ 
 
    height: 180px; 
 
    width: 222px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>OECTA Template</title> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" /> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <div id="header-fixedWidth"> 
 
       <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" /> 
 
      </div> 
 
     </header> 
 
     <div id="banner"> 
 
      <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" /> 
 
     </div> 
 
     <div id="main-content"> 
 
      <div id="mainContent-fixedWidth"> 
 
       <h1>Intranet</h1> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
       </div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="clear"></div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

(내용 더 큰 적응이 작은 창 높이에 따라 높이를 설정하고,하자) JS를 사용해야 할 수 있습니다

출처

2017-01-10 19:26:55 Kaddath

그것은이다.

CSS 규칙 overflow: auto을 mainContent-fixedWidth 요소에 추가하면 해결됩니다.

출처

2017-01-10 19:14:25 natecornell

콘텐츠가 100 % 외부에 표시됩니다.

답변

관련 문제