Question

描述我想要完成的内容的最佳方式是向您展示这张照片：

正如你在这里看到的，我想要的是一个居中的div，里面有两个div，另外两个div在div下面有id内容。我需要这个布局，因为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>

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

在使用height：auto时，不知道为什么jsfiddle side div height与main的高度不同它在我的机器上同时适用于Chrome和IE，但不要打扰，主要问题是，如何调整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>

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

2 个答案: