使用 height 100% 来保持浮动 div 匹配高度，但其中一个内的段落溢出

Question

我对此很陌生。尝试使用简单的 2 列布局创建 HTML 页面。两列都是容器 div 内的 div。一列向左浮动，另一列向右浮动。由于一列有背景颜色，因此两个 div 的高度相同很重要。我通过将 html、正文、容器 div 和每个浮动 div 的高度设置为 100% 来完成此操作。工作正常。但是内容中的一段（右浮div）比较大，溢出了div。这导致页面底部的此部分，其中带有背景色的 div 没有背景色。我知道 css 溢出属性，但我不希望它溢出，我希望 div 与其中的内容一样大。更好的方法来做到这一点？也欢迎与问题无关的任何其他提示。当我看到所有这些意想不到的错误弹出时，我仍然感到非常初学者。谢谢，这是我的第一个 post:)

内容只是从 allmusic.com 复制粘贴而来，所以我需要处理一些事情。

代码如下：

/*General
******************************************************************/


html, 
body, 
#container {
    height: 100%;
}


body {
    font-family: "Noto Sans", sans-serif;
    margin: 0;
}

div {
        box-sizing: border-box;
}

#container {
    clear: both;
}

p {
    text-indent: 50px;
}

.col {
    padding: 40px;
    height: 100%;
}

/*Nav
******************************************************************/

.nav {
    float: left;
    width: 20%;
    background-color: #e6e6e6;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    
}

.nav ul a {
    text-decoration: none;
    font-size: inherit;
}

/*Content
******************************************************************/

.content {
    float: right;
    width: 80%;
}

.content h2, .content h3 {
    text-align: right;
}

.albumCover {
    display: block;
    border-radius: 50%;
    width: 40%;
    margin: auto;
}

<!DOCTYPE html>
<html>
    <head>
<!--        <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen"/>-->
        <link rel="stylesheet" type="text/css" href="musics.css" media="screen"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='http://fonts.googleapis.com/css?family=Dosis:400,700|Noto+Sans|Roboto+Condensed|Raleway|Titillium+Web' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="container">
            <div class="col nav">
                <h3>Years</h3>
                <ul>
                    <li><a href="01TWQuadrophenia.html">1973 Quadrophenia</a></li>
                    <li><a href="02TWWhosNext.html">1971 Who's Next</a></li>
                    <li><a href="03TWTommy.html">1969 Tommy</a></li>
                </ul>
            </div>
            <div class="col content">
                <h2>Tommy</h2>
                <h3>The Who</h3>
<!--                <hr>-->
                <img class="albumCover" alt="Ray Davies Storyteller Album Cover" src="pics/twt.jpg">
                <p>The full-blown rock opera about a deaf, dumb, and blind boy that launched the band to international superstardom, written almost entirely by Pete Townshend. Hailed as a breakthrough upon its release, its critical standing has diminished somewhat in the ensuing decades because of the occasional pretensions of the concept and because of the insubstantial nature of some of the songs that functioned as little more than devices to advance the rather sketchy plot. Nonetheless, the double album has many excellent songs, including "I'm Free," "Pinball Wizard," "Sensation," "Christmas," "We're Not Gonna Take It," and the dramatic ten-minute instrumental "Underture." Though the album was slightly flawed, Townshend's ability to construct a lengthy conceptual narrative brought new possibilities to rock music. Despite the complexity of the project, he and the Who never lost sight of solid pop melodies, harmonies, and forceful instrumentation, imbuing the material with a suitably powerful grace.</p>
            </div>
        </div>
    </body>
</html>

Answer 1

请改用以下解决方案以获得完整的解决方案。

html, 
body {
    height: 100%;
}
#container {
    min-height: 100%;
    float: left;
    position: relative;
}
.nav {
    width: 20%;
    height: 100%;
    background-color: #e6e6e6;
    position: absolute;
}

JSFiddle link.

使用 height 100% 来保持浮动 div 匹配高度，但其中一个内的段落溢出

Using height 100% to keep floating divs matching height, but paragraph inside one of them overflows

html

css

css-float