Question

我认为这是一个菜鸟问题并已经回答，但我没有找到答案。

我正在做一个简单的2列布局。列工作正常但如果内容区域高于侧边栏区域，则页脚会进入侧边栏区域。 HTML：

＆＃13;

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

＆＃13;

<html>
<head>
</head>
<body>
<div class="wrapper"> <div class="container">
<div class="col span_2_of_3">
  <div>Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. </div>
  </div>
<div class="col span_1_of_3">
Here is widget content
  </div></div></div>
<footer>
<div class="container">
This is footer content
</div>
</footer>
  </body>
</html>

＆＃13;

Answer 1

http://codepen.io/anon/pen/azyEbb

你忘了关闭一个div，你的页脚需要

footer {
     clear: both;
}

。

Answer 2

与Sirence相同的解决方案，只是其他代码：

CSS：

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

HTML：

<html>
<head>
</head>
<body>
<div class="wrapper clearfix">
    <div class="container">
        <div class="col span_2_of_3">
            <div>Sed at a...stas nibh mollis in.</div>
        </div>
    </div>
    <div class="col span_1_of_3">
        Here is widget content
    </div>
</div>
<footer>
    <div class="container">
        This is footer content
    </div>
</footer>
</html>

为什么页脚会进入侧边栏？

2 个答案: