内容显示在 100% 高度之外

Question

有人可以解释为什么尽管我的主要内容和主要内容固定宽度的高度都设置为 100%，但为什么主要内容固定宽度内的子项目存在于其高度之外？不应该设置 height: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>

Answer 1

这是因为您的 'content' 项目都是浮动的，所以在浏览器看来您的 'mainContent-fixedWidth' 容器中没有任何内容。

将 CSS 规则 overflow: auto 添加到您的 mainContent-fixedWidth 元素，这应该可以解决问题。

Answer 2

是你想要的吗？如果您不熟悉 CSS:

，这里有不同的技巧

height in % 仅当层级链也在 % 中定义时才有效，通常将 'html' 和 'body' 设置为 100% 高度可以做到这一点，就像这里一样，有时它更复杂并且你将需要包装器或 JS
浮动项目在高度方面有点脱离内容流，如果我错了请纠正我，它们 "stay in the text line" 它们在里面。要强制容器适应，你必须做一个"clearfix"。它包括添加一个 div 和一个 class 就像我在你的浮动元素列表的最后所做的那样。此 clearfix class 可能已过时，有许多不同的版本，具体取决于您想要向后支持的程度。
'height:100%' 不适应内容，但 min-height 适应。坏消息是向后支持并不是很好。要完美支持这个，可能需要用到JS（小的时候根据window高度设置高度，大的时候让适应内容）

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

内容显示在 100% 高度之外

Content appears outside of 100% height

html

css

height