Question

设置子div的高度时遇到一些问题。我有2个div，其中一个有图片，另一个有文字。

他们都在父div中。

您可以在此处查看：http://fiddle.jshell.net/JgkgB/

HTML：

<div class="content-news">
    <div class="news_content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore t dolore magna aliquyam erat, sed diam voluptua.
    </div><!--news_content-->

    <div class="post_image">
    <img src="http://ec.l.thumbs.canstockphoto.com/canstock13365568.jpg" />
    </div><!--post image-->

</div><!--content news-->

CSS：

.content-news {
    height: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted black;
}

.post_image {
    float: left;
    margin-right: 9px;
    margin-top: 5px;
    max-width: 140px;
    width: 100%;

}

.news_content {
    float: right;
    width: 100%;
    max-width: 527px;
    background-color: #cccccc;
    height: 100%;
}

我已经尝试过使用JavaScript或jQuery，但它对我没用。

我需要的是使text-div与picture-div的高度相同。

我用搜索找到了一些可能对我有帮助的问题，但事实并非如此。

Answer 1

添加

position: relative;

到.content-news

和

position: absolute;
right: 0;
top:0;
bottom: 0;

到你的.news_content那应该有用。 http://fiddle.jshell.net/JgkgB/3/

Answer 2

添加此

.content-news {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted black;
}

Answer 3

尝试使用jQuery：

$(".news_content").css({'height':($(".post_image").height()+'px')});

这应该适用于在文本DIV上设置相同的高度。

Answer 4

如果您使用花车，百分比高度将无效。尝试使用display: table-cell;

示例：http://fiddle.jshell.net/skeurentjes/JgkgB/13/

Answer 5

一种方法是简单地设置CSS中两个元素的高度：

height:enter-height;

http://jsfiddle.net/JgkgB/

父母的Div高度

5 个答案: