html - DIV页脚不匹配 | DIV页脚不匹配

这就是我想要创建的。我在代码中有它，看起来还可以。但是div页脚不匹配。
Layout draft

我的代码：

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}


.container {
	width: 100%;
	height: 100%
	background: #FFF;
	margin: 0 auto;
}

.content ul, .content ol {
	padding: 0 15px 15px 40px;
}


.footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative;
}

.header {
	width: 100%;
	height: 100px;
	background: #ADB96E;
}

.sidebar1 {
	width: 20%;
	height: 1000px;
	float: left;
	background: #EADCAE;
	padding-bottom: 10px;
}

.sidebar2 {
	width: 10%;
	height: 950px;
	float: left;
	background: #EADCAE;
	padding-bottom: 10px;
}

.content {
	float:left;
	padding: 10px 0;
	width: 70%;
	height: 950px;
	float: left;
	background: #CF3
}

.Hybrid {
	float:left;
	padding: 10px 0;
	width: 10%;
	height: 50px;
	float: left;
	background: #CCC49F
}

.menu {
	float:left;
	padding: 10px 0;
	width: 70%;
	height: 50px;
	float: left;
	background: #CCC49F
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

	<div class="container">
 	<div class="header">HEADER<!-- end .header --></div>
  	<div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
	  <div class="Hybrid">Hybrid</div>
      <div class="menu">Menu</div>
   	  <div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>

        <div class="content">content</div>
  	<div class="footer">Footer<!-- end .footer --></div>
  	<!-- end .container --></div>
</body>
</html>

只是似乎没有找到我做错的事情。我认为那只是我看不到的愚蠢之举。

最佳答案

我认为您的标记无法从图片中获取布局。

检查此：https://jsfiddle.net/yotz6r4h/2/

html

<div class="header">header</div>

<div class="main">

  <div class="sidebar1">
    sidebar1
  </div>

  <div class="wrapper">

    <div class="menu">
      menu
    </div>

    <div class="sidebar2">
      sidebar2
    </div>

    <div class="content">
      content
    </div>

  </div>

</div>

<div class="footer">footer</div>

的CSS

.header {
    width: 100%;
    height: 100px;
    background: #ADB96E;
}

.main:after {
  content: "";
  display: table;
  clear: both;
}

.sidebar1 {
    width: 20%;
    height: 1000px;
    float: left;
    background: #EADCAE;
    padding-bottom: 10px;
}

.wrapper {
  width: 80%;
  float: left;
  height: 1000px;
  padding-bottom: 10px;
}

.menu {
    padding: 10px 0;
    height: 50px;
    background: #CCC49F;
}

.sidebar2 {
    width: 10%;
    height: 930px;
    float: left;
    background: #aaa;
    padding-bottom: 10px;
}

.content {
  width: 90%;
  float: left;
  background: #CF3;
  height: 940px;
}

.footer {
    padding: 10px 0;
    background: #CCC49F;
}