CSS布局，如何一个接一个地制作部分？

Question

 

body {
	background-color: #E6E6FF;
}
#header {
    padding-top: 50px;
    text-align: center;
    height: 100px;
}
#footer {
    text-align: right;    
}
#navMenu {
	background-color: #42424C;
	text-align: center;
	border-style: solid;
	border-color: #42424C;
        padding:10px;
}
#leftside {
    width:200px;
    float:left;
    min-height: 500px;
    	border-style: solid;
	border-color: #42424C;
}
#content {
        
	border-style: solid;
	border-color: #42424C;
	padding: 10px;
        min-height: 500px;
}

  


    <div id="header">Header</div>
    <div id="navMenu">Menu</div>
    <div id="leftside">left side</div>
    <div id="content">content</div>
    <div id="footer">footer</div>

它看起来如何：

我的问题：
看到图片中的红色箭头#content超过了#leftide我希望在#leftide之后启动#content我该怎么做？另外我的#leftside和#content总是相同的高度，我不能设置固定的高度，因为内容中的内容很多，而且可能很长，我希望我的#left一直持续到#content结束#footer begin是否可以这样做？任何帮助表示赞赏！

Answer 1

你可以通过这样的js来做到这一点

<script>
var content=document.getElementById('content').style.height;
var leftside=document.getElementById('leftside').style.height;
if(left>right)
{
document.getElementById('content').style.height=leftside;
}
else
{
document.getElementById('leftside').style.height=content;
}

如果您不关心IE6和IE7用户，只需使用display：table-cell作为您的div：

check here

请注意使用带有display：table。

的包装器

对于IE6 / IE7用户 - 如果你有 - 你可能需要回退到Javascript。

Answer 2

保持侧边栏与内容高度相同的一种方法是将它们显示为表格单元格。这样两个单元格的高度始终相同。

使用上面的代码，我添加了一些额外的CSS行，并将主要内容包装在div包装器中。

＆＃13;

＆＃13;

body {
  background-color: #E6E6FF;
}
#header {
  padding-top: 50px;
  text-align: center;
  height: 100px;
}
#footer {
  text-align: right;
}
#navMenu {
  background-color: #42424C;
  text-align: center;
  border-style: solid;
  border-color: #42424C;
  padding: 10px;
}
#leftside {
  width: 200px;
  min-height: 500px;
  border-style: solid;
  border-color: #42424C;
}
#content {
  border-style: solid;
  border-color: #42424C;
  padding: 10px;
  min-height: 500px;
}
.main-wrap {
display: table;
  width: 100%;
  min-height: 500px;
}
#leftside,
#content {
  display: table-cell;
}

＆＃13;

<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div class="main-wrap">
  <div id="leftside">left side</div>
  <div id="content">content</div>
</div>
<div id="footer">footer</div>

＆＃13;

＆＃13;

＆＃13;

您还可以查看CSS flexbox