html - CSS 列布局 - 具有动态宽度和与同级相同高度的 DIV

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+(和现代浏览器)中工作!

编辑

一些说明。右列的目的是保存 Google map ，因此该 map 应该填满整个 DIV。尝试在我上面链接的 fiddle 中为#right 设置固定高度(例如 100 像素)，您会看到显示的 map 。

Answer 1

jsfiddle demo

样式:

    .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>