Question

所以这就是我想要创造的东西。我在代码中有它，它看起来有点好。但是这个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>

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

Answer 1

在我看来，你的标记从你的图片中获取布局是错误的。

请检查：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;
}

Answer 2

嵌套的Flexbox可以做到这一点。

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-height: 100%;
}
.wrapper {
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
header,
footer {
  height: 75px;
  background: #c0ffee;
}
.inner-wrap-one {
  flex: 1;
  display: flex;
}
.sidebar-1 {
  background: #663399;
  color: white;
  flex: 0 0 10%;
}
.inner-wrap-two {
  flex: 1;
  background: plum;
  display: flex;
  flex-direction: column;
}
nav {
  height: 75px;
  background: #bada55;
}
main {
  display: flex;
  flex: 1;
}
.sidebar-2 {
  background: green;
  flex: 0 0 10%;
  color: white;
}
.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: grey;
  color: white;
}

＆＃13;

<div class="wrapper">
  <header>HEADER</header>
  <div class="inner-wrap-one">
    <aside class="sidebar-1">SIDEBAR 1</aside>
    <div class="inner-wrap-two">
      <nav>NAVIGATION</nav>
      <main>
        <aside class="sidebar-2">SIDEBAR 2</aside>
        <div class="content">CONTENT</div>
      </main>
    </div>
  </div>
  <footer>FOOTER</footer>
</div>

＆＃13;

Codepen Demo

Answer 3

我认为你的问题在浮动，但你可以尝试以下css代码，它的工作正常。

body{
  margin: 0px
}

.header{
  background: #fff222;
  height: 100px;
}

.sidebar1 {
  width: 20%; 
  background: #000;
  color: #fff;
  height: 550px;
  display: inline-block;
  float: left;
  
}

.Hybrid{
  width: 20%;
  float:left;
  background: green;
  display: inline-block;
  height: 50px;
}

.menu {
  background: #222fff;
  color: #fff;
  display: inline-block;
  width: 60%;
  height: 50px
}

.content{
  background: #5efff0;
    height:500px;
  float:left;
  width:60%
}

.sidebar2{
  background: #ff22aa;
  display:inline-block;
  float:left;
  width: 20%;
  height:500px;
}

.footer{
  width: 100%;
  height: 100px;
  background: #111fff;
  float: left;
}

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

Answer 4

其他人已经给出了解决原始问题的答案。我只是想快速向您展示您的标记如何从使用HTML5中受益。首先，您的DOCTYPE和head将如下所示：

<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
    <head>
        <meta charset="UTF-8"> <!-- nice and simple -->
        <title>SCHEEF</title>
    </head>
<!-- ... -->

其次，您可以使用更多语义元素替换其中一些通用div容器：

<!-- ... -->
    <body>
        <header>Header</header>
        <aside id="sidebar1">Sidebar1</aside>
        <main>
            <nav>Menu</nav>
            <aside id="sidebar2">Sidebar2</aside>
            <div id="content">Content</div>
        </main>
        <footer>Footer</footer>
    </body>
</html>

根据您的内容，您甚至可以将#content div替换为section或article元素（可能是第一个）。

这就是它的全部内容！你可能想尝试一下。

DIV页脚不匹配

4 个答案: