Fatal编程技术网
  • css/
  • Css 如何使子div扩展为父div

Css 如何使子div扩展为父div

css

Css 如何使子div扩展为父div,css,Css,嗨，我很难让我的子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; floa

嗨，我很难让我的子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;
}
下面是child div的css

.tab_container {
    clear: both;
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    height: 100%;
}
你知道我能做什么吗

父对象的高度是自动的。100%的子对象也会将其定义为“自动”，而“自动”则会导致内容的大小

您可以尝试向父对象添加一个固定高度，该高度可能会起作用，或者在子对象中放置足够的内容来拉伸它；这将起作用。

你可以用以下方式来做：（受这个问题启发：）

您在两个元素上都设置了
页边距底部。由于孩子有一个底部边距，它将始终小于该值。删除
页边距底部
样式可能会使它更接近。
您可以使用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>




jQuery中的自动高度
$（函数（）{
变量高度=$（“#内容”）.height（）；
$（“.tab_容器”）。高度（高度）；
});
#包装物#内容{
边界：1个山脊#999；
高度：自动；
最小高度：1000px；
宽度：1100px；
边缘顶端：40px；
右边距：自动；
边缘底部：30px；
左边距：自动；
浮动：左；
}
.tab_容器{
明确：两者皆有；
宽度：100%；
右边框：1个山脊#999；
身高：100%；
边框：1px纯绿色；
}
标签容器

谢谢，这种方法非常有效，尽管出于某种原因，它也调整了上面的div，但不知道为什么，但我设法调整了它以适应，因此非常感谢您的帮助如果您发现答案有用，您可以投票，甚至可以通过单击正确的标记来选择正确的答案。

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