Question

我真的碰到了这个，需要一些帮助。我试图创建一个两列布局，其宽度和高度都调整为左列的内容。它似乎是一个相当基本的布局，但我开始认为它无法完成（不使用JS）。

This fiddle描述了我尝试做的事情。它是一个容器DIV，里面有两个DIV，水平对齐。左内部DIV应调整其大小（宽度和高度）到其内容。右侧内部DIV（包含Google Map）应与左侧相同，同时填充容器的剩余宽度。

<div id="container">
    <div id="left">
        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...
    </div>
    <div id="right">
        Google Map here.
    </div>
</div>

我已经尝试过我所知道的一切以及我发现的所有技巧，但没有成功！

#container {
    background-color: #EEE;
    overflow: hidden;
}
#container div {
    border: 1px solid black;
    padding: 5px;
}
#left {
    background-color: lightblue;
    display: inline-block;
    float: left;
}
#right {
    background-color: lightgreen;
    height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
    overflow: hidden;
}

我发现了许多类似的问题，但在所有这些情况下，左侧DIV /列都有一个固定的宽度，这使得它变得更加容易。

非常感谢任何输入，特别是如果它适用于IE9 +（和现代浏览器）！

修改

一些澄清。右栏的目的是保存谷歌地图，因此地图应该填满整个DIV。尝试为我上面链接的小提琴中的#right设置一个固定的高度（例如100px），你会看到地图显示出来。

Answer 1

jsfiddle demo

css：

    .container {
    overflow: hidden;
    background-color: #EEE;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}


p {
    padding: 10px;
    margin-top: 10px;
    width: 50%;
}

HTML

    <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>


<div class="container">

<div class="column">

        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...

</div>

<div class="column">

<div id="map"></div>

</div>

</div>

<p>
    The right DIV (which contains a Google Map)
    should be the same height as the left DIV,
    while filling up the remaining width.
</p>
<p>How to do that?</p>

Answer 2

这是我提出的 - ＆gt; link

当您移除overflow的{{1}}属性时，它会按预期延伸。但是在这种情况下，您无法隐藏溢出的内容。

<强> CSS

#right div

CSS列布局 - 动态宽度和高度与兄弟相同的DIV

2 个答案: