Question

我有一个包装器，需要水平居中。我知道除了使用绝对位置之外别无他法。

#wrapper {
    width: 721px;
    height: 720px;
    position: absolute;
    margin: auto;
    top: 136px;
    left: 0;
    right: 0;
    background: white;
    clear: both;
}

它包含三个其他div，它们是浮动的。如果我将包装器的位置改为相对位置，那些div会搞砸。

____________________________________________
header
____________________________________________

         __wrapper____________
         |         |          |
         |         |          |
         |  div1   | div2     |
         |         |          |
         |         |          |
         |         |          |
         |_________|__________|
         |     div3           |
         |____________________|

__________________________________________
footer
__________________________________________

但我希望有一个粘性页脚，它将始终位于网站的底部。无论我有多少内容，它都会留在底层。我可以实现它，如果我的包装器不是位置：绝对，但由于它不能推动页脚底部，我想知道有没有其他方法可以做到这一点？

.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}

正如您在JS-FIDDLE中看到的，页脚隐藏在标题后面。

Answer 1

你在使用bootstrap吗？使用bootstrap，您的布局就像这段代码一样简单：

<div class="navbar navbar-fixed-top">
  you header
</div>

<div class="row">
 <div class="col-md-3 col-md-offset-3">
   your div1
 </div>
 <div class="col-md-3 col-md-offset-6">
   your div2
 </div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   your div3
 </div>
</div>


<div class="navbar navbar-fixed-bottom">
  your footer
</div>

并提供给CSS：

html, body {
  padding-bottom: 55px;
  padding-top: 55px;
}

因为这应该适合导航杆的顶部和底部。

编辑：因为您不使用框架，所以：

添加这个css页脚。

position: fixed;
bottom: 0;

这将显示页脚，因为它隐藏在标题后面。

Answer 2

这是一个粗略的投入，但在现代网络开发中，我们得到了精彩的flexbox的乐趣。这是一个简单的例子

<div class="wrapper">
<div class="flex-wrapper">
  <div class="flex-container">
    <div class="div1">Box1</div>
    <div class="div2">Box2</div>
  </div>
  <div class="div3">Box3</div>
</div>
</div>

.wrapper {
  display:flex;
  justify-content: center;
  align-content: center;
  height: 500px;
}
.flex-wrapper {
  display:flex;
  flex-direction: column;
  align-self: center

}
.flex-container{
  display: flex;
  position: relative;
}
.div1,.div2 {
  height:100px;
  width:100px;
}
.div1 {
  background-color:blue;
}
.div2 {
  background-color:red;
}
.div3 {
  background-color:green;
  width:200px;
  height:100px;
}

只需使用这种类型的布局，但在“包装器”周围创建另一个容器，以便页脚不受影响。

https://jsfiddle.net/wxokadrx/

此外，如果您不熟悉flexbox：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

如果您不想使用flex，这可能会有所帮助

首先，没有必要使用position absolute来水平对齐div。

<div id="outer">
 <div id="inner">
 </div>
</div>

<style>
 #outer {
  background-color: green;
 }
 #inner {
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  width: 400px;
  background-color: red;
 }
</style>

这是小提琴https://jsfiddle.net/x2j325n4/

浮动内部div将包装器的高度降低到0px。因此用显示替换浮点数：内联块可能会有所帮助。

<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey i'm header
</div>

<div id="wrapper">
<div id="div1">
    first div
</div>
<div id="div2">
    second div
</div>
<div id="div3">
    third div
</div>
</div>


<div id="footer">
    Hey i'm footer
</div>

小提琴：https://jsfiddle.net/rjhwxdL5/

或者如果您希望页脚停留在视口的底部，只需在页脚中使用position: fixed; bottom: 0;

Answer 4

您应该尝试CSS的clear属性（在我的情况下，我使用了名为div的{{1}}类），将其放在clearfix之后：

.box2

查看下面的代码段（使用全屏模式）：

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

.header {
    min-width: 720px;
	top: 0;
	left: 0;
	right: 0;
	max-width: 100vw;
	line-height: 80px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	border-bottom: 1px solid #dcdcdc;
	background: #f0f0f0;
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 1;
}
#wrapper {
  border: 1px solid blue;
  width: 721px;
	background: white;
  margin: 120px auto 40px;
}
.box1 {
  clear:both;
  display: inline-block;
  float:left;
  height:300px;
  width:360px;
  border: 1px solid black;
}
.box2 {
  clear:both;
  display: inline-block;
  float:right;
  height:300px;
  width:350px;
  border: 1px solid black;
}
.footer {
  border-top: 1px solid #dcdcdc;
  max-width: 100vw;
  font-weight: bold;
  text-align: center;
  background: #f0f0f0;
  width: 100%;
  height: 80px;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

希望这有帮助！

位置绝对包装后的粘性页脚

4 个答案: