css - 容器中的两个 float 列，增加容器高度以匹配列的最佳方法？

Question

我在 Stack Overflow 和其他资源中进行了搜索，例如 here .

这是代码，我说的是:

.container{
        width: 100%;
        height: 100%; /*adjust this manually and no issue*/
        background: #222222;
        margin: 0;
        padding: 0;
}

我正在谈论的部分有一个 jsfiddle。如果容器更改为(比如说)180%，它会解决所有问题，因为它比所有东西都大，所以所有东西都位于它上面。

我有一个容器，这里是父容器，还有一个名为 content 的子容器，其中有 2 列。当我在列中写得太多时，它会越过容器，因为它们都是 float 的。我可以手动更改它，所以一旦我对文本感到满意，只需更改 OK 的高度即可。但是，我认为这不是一个好的做法，而且我确信还有另一种方法可以通过取消所有 float 来自动执行此操作。但是我无法让它工作。

Answer 1

您需要像这样调整您的 CSS:

/*
Dark Grey: #222222 
Orange: #ff8a00
Light Orange: #ffcc8f
White: #ffffff

*/
body {
    background: url("images/river.jpg") no-repeat top center fixed;
    background-color: #222222;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
h2 {
    color:#ff8a00;
    font-size: 1.75em;
    letter-spacing: 8px;
    padding:30px;
    border-bottom: 1px dotted #ff8a00;
    width:50%;
    margin:0 auto;
    padding-top:5%;
}
h3 {
    color:#ff8a00;
    font-size: 1.1em;
    letter-spacing: 8px;
    border-bottom: 1px dotted #ff8a00;
    margin:0 auto;
    padding-top:5%;
}
.container {
    width: 100%;
    height: auto;
    background: #222222;
    margin: 0;
    padding: 0;
    position:relative;
}
.content {
    margin:0 auto;
    width: 60%;
    height: auto;
    text-align:center;
    background: #fc0;
    /*Change to #222222 */
    font-family: proximaNova;
    font-size:1.1em;
    color:white;
    display:block;
}
.bio {
    margin:0 auto;
    width: 70%;
    height: auto;
    text-align:center;
    background: #222222;
    /*Change to #222222 */
    font-family: proximaNova;
    font-size:1em;
    font-style:normal;
    margin-top:30px;
    line-height: 30px;
}
.left-column {
    width: 48%;
    display:inline-block;
    height: auto;
    text-align:left;
    background: black;
    /*Change to #222222 */
    font-family: proximaNova;
    font-size:1.0em;
    margin-top:5%;
}
.right-column {
    display:inline-block;
    width: 48%;
    height: auto;
    text-align:left;
    background: black;
    /*Change to #222222 */
    font-family: proximaNova;
    font-size:1.0em;
    margin-top:5%;
}
.footer {
    width:100%;
    background-color: white;
    text-align:center;
    color:#222222;
    font-size:1em;
    font-family: proximaNova;
}
.nav-text {
    margin-left:20px;
    margin-top:25px;
    font-family:trench;
    font-size:22px;
    color: white;
    float:left;
}

您在任何地方都添加了 100% 的高度，就好像这是解决所有问题的方法，而这就是大多数问题的原因。如果您想自动调整大小，那么该属性的合理答案是...auto。通过将你所有的 100% 高度设置为自动并摆脱你的 float (你可以使用 float ，但你必须清除它们，因为我们正在这样做，所以向你展示另一个选项)，你可以轻松地做到这一点，没有 ultra你正在尝试的复杂而令人费解的方式。

我已经 forked your fiddle这样您就可以添加填充、边距等。还可以更改其中一个 div 的背景，以便您了解盒子模型的工作原理，但当然您可以(并且应该)将其更改为任何内容

有关 HEIGHT PROPERTY 的更多信息，请参阅 MDN 页面语法、行为和示例