Question

HTML：

<div id="container">

    <div id="header">
        <h1>header</h1>
    </div>

    <div id="content">
        <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
        <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
    </div>

    <div id="navigation">
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
    </div>

    <div id="footer">
        Footer
    </div>

</div>

CSS：

html {
    font: 100% calibri;
}

#container {
    width: 960px;
    margin: 0 auto;
    background-color: pink;
}

#content {
    float:left;
    width: 660px;
    background-color: #ccc;
}

#navigation {
    float: right;
    width: 300px;
    background-color: #eee;
}

#navigation a {
    display: block;
    padding: 0 0 10px 0;
}

#footer {
    clear: both;
    background-color: #aaa;
    padding: 10px;
}

结果： https://jsfiddle.net/x83uw77a/

如何让两个列具有相同的高度？

Answer 1

一种解决方案是使用display：table和display：table-cell，而不是浮点数。

将您的内容包装在一个'container div'中：

<div id="content-holder">
        <div id="content">
            <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
            <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
        </div>

        <div id="navigation">
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
        </div>
        </div>

CSS：

#content-holder {
display:table;
}
#content {
    display:table-cell;
    width: 660px;
    background-color: #ccc;
}

#navigation {
    display:table-cell;
    width: 300px;
    background-color: #eee;
}

演示：https://jsfiddle.net/x83uw77a/1/

Answer 2

我的解决方案是定义 #navigation 和 #content height ，其大小合理，本身高度： 960px; 并为它们提供 overflow：auto; ，当子元素溢出父元素时，它将创建一个滚动条。好 IE 4 支持。

<强> CSS：

    #navigation,
    #content {
        overflow: auto; /* IE 4 SUPPORT */
        height: 960px;
    }

Answer 3

如果你可以使它工作，你可以使用position：absolute和height：100％

child50

然后，您可以相应地更改#container的高度，以获得两列所需的高度！

如果您不需要向后兼容性，请尝试使用flex-box作为更现代的方法！

使用float的CSS两列布局导致列的高度不相等

3 个答案: