使用CSS,当没有设置左侧或右侧的高度时,如何用<div>扩展/填充左右两个<div><div>高度(由background-color确定)。正确的<div>

根据提供的数据量,左侧的<div>可以为任意高度。

我尝试了height: 100%,但这不起作用。

我必须使用float属性-所以我不能使用table / table-cell属性。

我已经读过这个post来扩展宽度,但是上面的答案有一个定义的高度值。所有其他示例似乎都具有定义的高度值。

这是我的HTML代码:

<div class="wrapper">
    <div class="photo">
        //image has max-height: 149px & max-width: 149px; assigned in the css file
        <img class="photo_dimensions" src="{{ name_details_photograph_url }}" />
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />
    </div>
</div>


这是我的CSS代码:

.wrapper {
    width:100%;
    height:100%;
    border:1px solid;
}
.photo {
    height: 100%;
    background:blue;
    float:right;
    vertical-align:top;
    text-align:center;
    padding:2px;
}
.photo_dimensions {
    max-height: 149px;
    max-width: 149px;
}
.details {
    width:auto;
    height:auto;
    background:red;
    overflow:hidden;
    vertical-align:top;
    text-align:left;
}


这是我目前拥有的视觉显示:

最佳答案

如果只需要扩展背景,则将其设置为.wrapper

JsFiddle Demo



.wrapper {
    background: yellow;
    overflow: auto;
}
.photo {
    float: right;
}
.details {
    background: pink;
    overflow: auto;
}

<div class="wrapper">
    <div class="photo">
        <img src="//dummyimage.com/100"/>
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q
    </div>
</div>

关于html - 扩展div高度以匹配其他高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30792937/

10-09 15:18
查看更多