Question

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

内容只是从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.

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

1 个答案: