居中 div 在另外两个 div 上，自动高度

Question

描述我正在努力完成的事情的最佳方式是向您展示这张照片：

正如你在这里看到的，我想要的是一个居中的 div，里面有两个 div，另外两个 div 在 div 下，id 内容.我需要这种布局，因为 div 左侧和侧面将具有相同的背景（除了页面的其余部分）。我设法通过在 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>

AND 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 端 div 使用 height: auto 时 height 与 main 的高度不同；它在我的机器上可以在 chrome 和 IE 上运行，但不要打扰，主要问题是，如何将 div 左右的高度调整为 div 内容高度?

编辑：除了纯 HTML+CSS

外不能使用任何东西

提前致谢！

Answer 1

如果您希望 "right" 和 "left" 与 "container" 的高度相同，您只需将 "height" 设置为 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>

Answer 2

看看这个---

html, body {height: 100%}
#container{
    position: relative;
    width: 100%;
    height: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;
    height: 100%
}
#side{
 height: inherit;
 color: #FFFFFF;
 float:left;
 background: blue;
 width: 100px;
    display:none /* set it to block in case you need*/
 }
#main{
 background: white;
 float: right;
 width: 300px;
    height: 100%;
 }

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

居中 div 在另外两个 div 上，自动高度

Centered div over two other divs with auto height

html

css

css-position