html - 将 div 置于其他两个具有自动高度的 div 之上

Question

描述我正在尝试完成的事情的最佳方式是向您展示这张照片:

正如您在这里看到的，我想要的是一个居中的 div，里面有两个 div，还有两个 div 下面有 id 内容的其他 div。我需要这种布局，因为 div left 和 side 将具有相同的背景(除了页面的其余部分)。我设法通过在 div 内容上使用绝对位置来做到这一点，但是如果我这样做，我不知道如何自动将 div 左右高度调整为 div 内容高度。它是这样工作的:http://jsfiddle.net/95gbd8z5/这是代码

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="content">
        <div id="side"></div>
        <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum         has been the industry's standard dummy text ever since the 1500s, when an unknown printer         took a galley of type and scrambled it to make a type specimen book. It has survived not         only five centuries</p></div>
    </div>
</div>

和 CSS

    #container{
    position: relative;
    width: 100%;
}
#left{
    height: 500px;
    width: 50%;
    float:left;
    background: #363837;
}
#right{
    background: red;
    height: 500px;
    width: 50%;
    float: right;
}
#content{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-left:auto;
    margin-right:auto;
    width: 400px;
}
#side{
    height: inherit;
    color: #FFFFFF;
    float:left;
    background: blue;
    width: 100px;
    }
#main{
    background: white;
    float: right;
    width: 300px;
    }

不知道为什么在 jsfiddle 中使用 height: auto 时 side div 的高度与 main 的高度不同；它适用于我的机器上的 chrome 和 IE，但不要打扰，主要问题是，如何将 div 的左右高度调整为 div 内容高度？

编辑:除了纯 HTML+CSS 之外不能使用任何东西

提前致谢!

Answer 1

如果您希望“右”和“左”距离“容器”的高度相同，您只需将“高度”设置为 100%。在示例中，我使用 transform 属性将内容居中，因为如果我理解你是对的，你也想将内容居中。

#container{
    position: relative;
    width: 100%;
    padding:20px 0;
}

#left {
    width: 50%;
	background: #363837;  
    height:100%; /* that's the key */
    position:absolute;
    top:0;
    left:0;
}

#right{
    background: red;
	width: 50%;
	height:100%; /* that's the key */
    position:absolute;
    top:0;
    right:0;
}

#content {
  width:450px;
  margin:0 auto;
  background:#fff;
  position:relative;
  z-index:1;
}

#side {
  display:table-cell;
  background:green;
}

#main {
  display:table-cell;  
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="content">
    <div id="side">side</div>
    <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>        </div>
  </div>
</div>