Question

所以我写了一个有三个div的Web应用程序。一个是左边那个标题下的标题菜单以及将加载内容的菜单旁边。

所以我不想设置静态宽度和内容长度变化。我试过overflow:auto 但那没用。

CSS ：

body {
    margin: 0;
    padding:0;
    height:100%;
}

.area-header {
    height:40px;
    background-color:#71A4C3;
    margin-bottom: 20px;
    margin-left:20px;
    margin-right:20px;
}

.area-menu {
    width:300px;
    margin-left:20px;
    background-color:#8BC6EA;
    display:inline-block;
    margin-bottom:auto;
    padding-bottom:100%;
    height:100%;
}

.area-content {
    display:inline-block;
    position:absolute;
    margin-right:20px;
    margin-left:20px;
}

HTML：

<body>
     <div id="area-header" class="area-header">
         <h2>A Web Application!</h2>
     </div>

        <div id="area-menu" class="area-menu">
            <ul id="menu">
                @foreach (WebApplicationWithSqlAndJS.Models.MenuItem item in Model)
                {
                    <li id="menu-item"><a href="@item.Target" onclick="return false">@item.Title</a></li>
                }
            </ul>
        </div>

        <div id="area-content" class="area-content"></div>

</body>

Answer 1

您只需要将父div添加到您想要具有相同高度的div。

父div：

overflow: hidden;

儿童div：

float: left; padding-bottom: 500em; margin-bottom: -500em;

通过应用底部填充，可以在CSS中获得相等的高度列   相同金额的大量，底部负利润率   用隐藏溢出的div包围列。   垂直居中文本有点棘手，但这应该是   帮助你。

https://stackoverflow.com/a/1205485/2851845

＆＃13;

   
body
{
    margin: 0;
}

.area-header
{
    height:40px;
    background-color:#71A4C3;
    margin-bottom: 20px;
    margin-left:20px;
    margin-right:20px;
}

#area-wrapper
{
    overflow: hidden;
    width: 100%;
}  

.area-menu, .area-content
{
    float:left;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

.area-menu
{
    width: 200px;  
    background-color:#8BC6EA;
}

.area-content
{
    width: 400px;  
    background-color: LightSlateGrey;  
}

＆＃13;

<body>
    <div id="area-header" class="area-header">
        <h2>A Web Application!</h2>
    </div>
    <div id="area-wrapper">
        <div id="area-menu" class="area-menu">
            <ul id="menu">
                <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li>
            </ul>
        </div>
        <div id="area-content" class="area-content">
            <div style="height:200px;background:red;"></div>
        </div>
    </div>
</body>

＆＃13;

Answer 2

您可以设置＆＃34;区域内容的高度＆＃34; div与＆＃34; area-content＆＃34;相同DIV：

        <script>
        $(document).ready(function(){   
                heightToSet=$("#area-menu").height();
                $("#area-content").height(heightToSet);
        });
        </script>

如何使两个div彼此相邻具有相同的高度？

2 个答案: