内容出现在100％高度之外

有人可以解释为什么尽管我的主内容和我的主要内容固定宽度的高度都设置为100％，但为什么主内容固定宽度内的子项存在于其外部高度？不应该设置高度：100％会使其相对于放置在内部的物品增长？内容出现在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％'是指相对于容器而不是内容。 –

是你想要的吗？有在这里不同的技巧性的东西，如果你不熟悉CSS：在％

身高只有行之有效如果层次链在％还规定，一般设置“HTML”和“体”，以100％的高度做这件事情，就像这里，有时它更复杂，你将需要包装或JS漂浮项目从高度方面走出内容流，纠正我，如果我错了，他们“留在文本线“。为了强制容器适应，头部必须做一个”修正“。它包括在浮动元素列表的最后添加一个像我一样的类的div。这个clearfix类可能已经过时了，根据你想要向后支持的程度有很多不同的版本。
'height：100％'不适应内容，但最小高度。坏消息是后退支持并不是很好。为了对此有一个完美的支持，您可能需要使用JS（通过设置视当它是小窗口高度的高度，让适应内容时更大）

* 
 
{ 
 
    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>

来源

2017-01-10 19:26:55 Kaddath

这是因为你的“内容”项目都是浮动的，所以它似乎不存在在你的“搜索Maincontent-固定宽度”容器中的任何内容的浏览器。

将CSS规则overflow: auto添加到mainContent-fixedWidth元素，并且应该解决它。

来源

2017-01-10 19:14:25 natecornell

内容出现在100％高度之外

回答

相关问题