Question

我正试图将div放在页面底部并且没有运气。我在网上搜索过，但在尝试应用他们的解决方案时一直没有提出任何建议。

任何人都有可能有解决方案吗？请参阅以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
    background-color: aqua;
    height:100%;
    min-height:100%;
}
.centerDiv {
    display: table;
    width:90%; 
    margin:0 auto;
    height:100%;
    min-height:100%;
    text-align: center;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
    border: 3px solid #fff;
} 
</style>
</head>
<body>
<div class="centerDiv">
    <div class="box box1" style="background-color:#585858;"> </div>
    <div class="box box2" style="background-color:#118C4E;"> </div>
    <div class="box box3" style="background-color:#C1E1A6;"> </div>
    <div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body> 
</html>

Answer 1

我认为你的意思是，你的div将位于页面底部。这会对你有所帮助：

.centerDiv {
    display: block;
    width: 100%; 
    margin: 0 auto;
    height: auto;
    text-align: center;
    position: fixed;
    bottom: 0;
}

将位置设置为fixed并且div将随时停留在某个位置（当您向下滚动时）。

Answer 2

您遇到的问题是该框在技术上已位于页面底部 - 页面展开以适应内容，而不是窗口。如果您希望框始终位于窗口的底部，则需要使用position : fixed，它将位于窗口的底部，无论如何你滚动多少或页面有多短/高。

See the demo here for the result with the fixed position.

.centerDiv {
    width:100%; 
    text-align: center;
    position: fixed; 
    bottom: 0;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
}

现在，如果您希望框始终位于页面底部，除非页面高度小于窗口高度（在这种情况下它将位于窗口的底部），您可以使用该框。我会遇到麻烦。这对CSS来说有点困难。但是，如果你不介意使用脚本，那么使用jQuery很容易：

See the demo here for the result using jQuery.

var minheight = $(window).height();
$("body").css("min-height", minheight);

和

body {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%; 
}
.centerDiv {
    width:100%; 
    text-align: center;
    position: absolute; 
    bottom: 0;
}
.box {
    display: inline-block;
    width: 100px;
    height:100px;
    border: 3px solid #fff;
}

Answer 3

div元素具有align属性，因此可以提供帮助：

<div align="center"></div>

将DIV置于页面底部

3 个答案: