0

我想让两个 div 高度相等——左右 div。

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

  1. 如何使用 HTML / CSS 实现等高 div（并排放置）？
  2. CSS：如何使左浮动 div 动态调整高度？

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

在此处输入图像描述

代码

   <!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>
4

1 回答 1

1

你们很亲近，只是出了点小问题。

您不需要右列的宽度，只需要默认的width:auto. 我使用了相同的负边距和填充技巧来使右列的高度与左列的高度相同，并让右列产生占据其余空间的错觉。您还应该浮动正确的容器并带走边距。您可以删除clear:both左列的，因为它没有被使用

演示在这里

.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查询以允许调整窗口看起来更平滑。这是一个例子。它是根据示例中的文本长度进行半硬编码的，但在您的最终产品中，它可能是您最后添加的内容

于 2013-08-21T18:40:30.447 回答