Question

我想让两个div等高 - 左和右div。

我参考了以下帖子并找到了一种底部填充方法。

How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
CSS: How to make left float div to adjust height dynamically?

我试图在我的页面中应用这个概念;但它无法正常工作。在右边的div上面有不需要的空间。我们怎样才能纠正它？

enter image description here

CODE

   <!DOCTYPE html>

<style type="text/css">
    .myContent {
        width: 100%;
        border: 2px solid violet;
        min-width: 1210px;
    }

    .myHeader {
        width: 100%;
        /*width: 1200px;*/
        clear: both;
        background-color: #DFE8EF;
        border: 1px solid red;
    }

    .leftPart {
        border: 1px solid red;
        width: 200px;
        height: 200px;
        float: left;
        background-color: silver;
    }

    .rightPart {
        border: 1px solid orange;
        background-color: beige;
        float: left;
        min-width: 1000px;
        /*
        margin-bottom: -1000px;
        padding-bottom: 1000px;
        margin-right: -5000px;
        padding-right: 5000px;
    */
    }
</style>

<html>
<head>
    <title>UpdateAccrualByItem</title>


    <link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <div id="body">
        <div class="myContent">

            <div class="myHeader">
                <img src="/Images/logo_header.jpg" />
            </div>

            <div class="leftPart">
                Menu
            </div>
            <div class="rightPart">

                <h2>UpdateAccrualByItem</h2>
            </div>

        </div>
    </div>

</body>
</html>

Answer 1

你很亲密，但只是有一些小错误。

您不需要右列的宽度，只需要默认的width:auto。我使用相同的负边距和填充技巧使右列的高度达到左边高度的大小，同时也为右列提供了占据剩余空间的错觉。你也应该漂浮正确的容器并带走边缘。您可以删除左列的clear:both，因为它未使用

Demo here

.leftPart {
    border: 1px solid blue;
    width: 200px;
    height:200px;
    float:left;
    background-color: orange;
}
.rightPart {
    border: 1px solid orange;  
    background-color: beige;
    float:left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
    margin-right: -5000px;
    padding-right: 5000px;
}

修改

您还可以添加某种类型的@media查询，以便调整窗口以使其更加流畅。 Here is an example。它是基于示例中的文本长度进行半硬编码的，但在最终产品上，它可能是您最后添加的内容

底部填充方法不适用于Equal Height Div

1 个答案: