Question

您好我无法让我的孩子div扩展到它所在的父div的高度。

这是父div的css

#wrapper #content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
}

这里是孩子div的css

.tab_container {
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    height: 100%;
}

任何想法我能做什么？

Answer 1

你可以使用以下风格来实现:(灵感来自这个问题：CSS - Expand float child DIV height to parent's height）

#content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
    position: relative; /* added */
    width: 100%; /* added */
}

.tab_container {
    border: 1px ridge orange; /* added */
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    height: 100%;
    position: absolute; /* added */
}

Fiddle here

Answer 2

你可以用jQuery做到这一点。请查看下面的示例代码。

<html>
<head>
<title>Auto Height in jQuery</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
    var height = $("#content").height();
    $(".tab_container").height(height);
});
</script>
<style type="text/css">
#wrapper #content {
    border: 1px ridge #999;
    height: auto;
    min-height: 1000px;
    width: 1100px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    float: left;
}
.tab_container {
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    height: 100%;
    border: 1px solid green;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div class="tab_container">Tab Container</div>
    </div>
</div>
</body>
</html>

Answer 3

父亲的身高是自动的。 100％的孩子导致它也被定义为自动，并且自动导致内容的大小。

您可以尝试为可能工作的父级添加固定高度，或者在子级中放入足够的内容来拉伸它; 将工作。

Answer 4

您在两个元素上都设置了margin-bottom。如果孩子有一个底部边缘，它总是会小一些。删除margin-bottom样式可能会使它更接近。

如何使子div扩展为父div

4 个答案: