Question

我需要帮助设置＆＃39; div1＆＃39;到其父元素的50％：＆＃39; div2＆＃39;。 'div2＆＃39;的高度由里面的图像决定。如何设置＆＃39; div1＆＃39;到50％＆＃39; div2＆＃39;

对于＆＃39; div1＆＃39;我试过了：height: 50%，min-height: 50%; 对于＆＃39; div2＆＃39;我试过了：height: auto

Answer 1

你可以使用JQuery，但这是我使用table方法的纯CSS方式。

HTML

//book//p[@id="contact_number"]//text()

CSS

<div class="container">
    <div class="column"><img src="http://lorempixel.com/400/200" class="image"/></div>
    <div class="column">
        <div class="row right-side">Upper half</div>

    </div>
</div>

http://jsfiddle.net/7y9eK/26/

Answer 2

请尝试以下操作： Demo

.div2 {
    border: 3px solid blue;
    width: 40%;
    float: right;  
    position: absolute;
    right: 0;
    top: 0;
    bottom:50%;
}
.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

HTML：

<div class="parent">
    <div class="div1">
        <img src="http://lorempixel.com/400/200" class="image" />
        <div class="div2">Needs to be 50% height of DIV1</div>
    </div>
</div>

Answer 3

将jquery用于此

<script type="text/javascript">
  $(document).ready(function() {
        var div1=$( '.div1' ).height();
        $('.div2').height(div1/2);
  });
</script>

Answer 4

元素的高度可以有5个可能的属性1：

auto - 浏览器计算此元素的高度。
长度 - 明确的长度，例如200px，2em，甚至是0
百分比 - 作为其包含块元素的百分比
inherit - 来自其父级
initial - 默认值 - auto此处

您的CSS无法正常工作的原因是，当您告诉.div1具有基于百分比的高度时，它会尝试根据为其父级设置的值来计算该值。由于.div2的高度为auto（默认情况下），而不是基于特定长度的高度，.div1也默认为auto的高度。

在这种情况下，您有几个选项：

选项1

给.div2一个固定的高度，以像素或ems为单位。例如，如果您设置height: 200px;

小提琴：http://jsfiddle.net/vyder/k39048eh/3/

选项2

根据父项（html，以及我的示例中的正文）给予.div2百分比高度。

小提琴：http://jsfiddle.net/vyder/k39048eh/2

选项3

但是，这并不是一个理想的解决方案，因为您尝试匹配.div2的高度以适应图像子元素的高度。

也许，您可以为.div2设置固定的高度，并调整图像大小以使其具有相同的高度，以达到相同的效果。

小提琴：http://jsfiddle.net/vyder/k39048eh/5/

选项4

最后，当您将元素的位置设置为absolute时，浏览器会在绘制时遵循不同的规则。

所以在这里我将.div1的位置设为absolute，将.div2设置为relative，以便.div1的维度和排名是相对于.div2计算的。

小提琴：http://jsfiddle.net/vyder/k39048eh/8/

你面临的问题是，如果.div1的内容增加，且其高度超过其父级，.div2不会自动增加其高度以适应.div1。

如果您有疑问，请告诉我。

Answer 5

您可以使用CSS calc函数：

请参阅：jsfiddle.net/k39048eh/4/

CSS3 calc（）函数主要用于计算长度，数字，角度，过渡/动画时间或声音频率。但是，它允许您混合测量类型 - CSS中的一个强大概念。

如何设置没有高度的div的相对高度

5 个答案:

选项1

选项2

选项3

选项4