html - CSS - 相对定位的父 div 不会拉伸(stretch)到绝对子 div 高度

标签 html css

我整个早上都在谷歌上搜索这个,但似乎无法让它工作:

我有一个相对定位的父 DIV 和一个在其中设置的两列子 DIV,两者都定位为绝对。 我需要父 DIV 的高度来拉伸(stretch)内部 DIV 的内容。

我已经尝试在#content 的结束标记之前放置一个 .clearfix 类型位,但我没有 float 任何内容。我也试过向 #content div 添加一个 float 属性,但无济于事。谁能在这里指出我正确的方向。显然,我遗漏了嵌套显示如何相互影响的一些信息。

CSS:

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol {
    width: 500px;
    position: absolute;
}

#rightcol {
    width: 270px;
    position: absolute;
    left: 500px;
    margin-left: 10px;
    text-align: center;
}

HTML:

<div id="content">
    <div id="leftcol">
        <p>Lorem Ipsum</p>
    </div><!-- /leftcol -->
    <div id="rightcol">
        <img src="images/thumb1.jpg">
        <img src="images/thumb2.jpg">
    </div><!-- /rightcol -->
    <br style="clear:both;">
</div><!-- /content -->

最佳答案

原力的阴暗面是通往许多被一些人认为是不自然的能力的途径。

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});​

关于html - CSS - 相对定位的父 div 不会拉伸(stretch)到绝对子 div 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8184919/

相关文章:

html - 在 html 中显示表单时使用表格标签是不是糟糕的设计?

javascript - DOM 加载被后续脚本阻止

javascript - 如何使导航菜单滚动?

javascript - 两个 Bootstrap 选项卡同时显示为事件状态

html - Bootstrap 3 标题颜色不均匀

html - Go - 不呈现 HTML 注释

jquery - 我怎样才能阻止这个 CSS Accordion 自动向下滚动?

javascript - 在 Chrome 上使用 Tab 键时 iFrame 不滚动

移动和主要 CSS 混合

javascript - 延迟 GIF 直到点击 (CSS/Javascript)