尽管尝试了很多我搜索过的方法,但我似乎无法将这个页脚粘在底部。
基本上我在顶部有一个标题框,将它与页面的其余部分分开,我希望底部的内容相同,内容在中间,任何想法我做错了什么?我已经尝试过固定位置,但是我无法使用这些方法显示方框阴影或保持居中。
谢谢!
html {
overflow-y: scroll;
}
body {
margin: 0;
background-color: #ffffff;
font-family: 'Ubuntu', sans-serif;
}
div {
display: block;
}
.header-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
margin-right: auto;
margin-left: auto;
width: 940px;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
#header {
height: 60px;
padding: 20px 0 25px 0;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
width: 270px;
height: 60px;
text-indent: -999em;
line-height: 60px;
background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px;
background-size: 270px 60px;
}
#header .american-flag {
display: block;
float: right;
}
#header .american-flag img {
max-height: 60px;
}
#content {
height: 100%;
padding: 20px 0 0 0;
}
body a {
color: red;
text-decoration: none;
}
body a:hover {
text-decoration: underline;
}
.footer-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#footer {
line-height: 60px;
height: 60px;
}

<html>
<body>
<div class="header-wrapper">
<div class="container" id="header">
<div class="logo">
<a href="/">URL</a>
</div>
<div class="american-flag">
FLAG
</div>
</div>
</div>
<div class="container" id="content">
Site content
</div>
<div class="footer-wrapper">
<div class="container" id="footer">
footer
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:1)
检查以下css
.footer-wrapper
{
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
bottom: 0px; /* add this line */
position:fixed; /* add this line */
}
希望这会有所帮助。
答案 1 :(得分:1)
我已将Ryan Fait's sticky footer应用于您的标记。
html,
body {
height: 100%;
}
html {
overflow-y: scroll;
}
body {
margin: 0;
background-color: #ffffff;
font-family: 'Ubuntu', sans-serif;
}
div {
display: block;
}
.wrap {
min-height: 100%;
margin-bottom: -60px;
}
.header-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
margin-right: auto;
margin-left: auto;
width: 940px;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
#header {
height: 60px;
padding: 20px 0 25px 0;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
width: 270px;
height: 60px;
text-indent: -999em;
line-height: 60px;
background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px;
background-size: 270px 60px;
}
#header .american-flag {
display: block;
float: right;
}
#header .american-flag img {
max-height: 60px;
}
#content {
height: 100%;
padding: 20px 0 0 0;
}
body a {
color: red;
text-decoration: none;
}
body a:hover {
text-decoration: underline;
}
.footer-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#footer {
line-height: 60px;
height: 60px;
}
<div class="wrap">
<div class="header-wrapper">
<div class="container" id="header">
<div class="logo">
<a href="/">URL</a>
</div>
<div class="american-flag">
FLAG
</div>
</div>
</div>
<div class="container" id="content">
Site content
</div>
</div>
<div class="footer-wrapper">
<div class="container" id="footer">
footer
</div>
</div>
答案 2 :(得分:1)
您可以使用calc()
属性的min-height
功能。
像:
#content {
min-height: calc(100vh - 200px); // Viewport Height (100%) - Remaining space of the content & header (135px)
}
请看下面的代码段:
html
{
/* overflow-y: scroll; */
}
body
{
margin:0;
background-color:#ffffff;
font-family:'Ubuntu',sans-serif;
}
div
{
display:block;
}
.header-wrapper
{
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.container
{
margin-right:auto;
margin-left:auto;
width:940px;
}
.container:before, .container:after
{
display: table;
line-height: 0;
content: "";
}
#header
{
height:60px;
padding:20px 0 25px 0;
}
#header .logo
{
float:left;
}
#header .logo a
{
display: block;
width: 270px;
height: 60px;
text-indent: -999em;
line-height: 60px;
background: url('/test/_assets/img/header-logo.png') no-repeat 0px 1px;
background-size: 270px 60px;
}
#header .american-flag
{
display:block;
float:right;
}
#header .american-flag img
{
max-height:60px;
}
#content
{
height:100%;
padding:20px 0 0 0;
}
body a
{
color:red;
text-decoration:none;
}
body a:hover
{
text-decoration: underline;
}
.footer-wrapper
{
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#footer
{
line-height:60px;
height:60px;
}
#content {
min-height: calc(100vh - 185px);
}
<div class="header-wrapper">
<div class="container" id="header">
<div class="logo">
<a href="/">URL</a>
</div>
<div class="american-flag">
FLAG
</div>
</div>
</div>
<div class="container" id="content">
Site content
</div>
<div class="footer-wrapper">
<div class="container" id="footer">
footer
</div>
</div>
希望这有帮助!
答案 3 :(得分:1)
您需要将以下内容添加到.footer-wrapper
类:
.footer-wrapper {
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
}
以下是它的一个小提琴,因为它在代码片段中看起来不太好:https://jsfiddle.net/jm2rveqc/
html {
overflow-y: scroll;
}
body {
margin: 0;
background-color: #ffffff;
font-family: 'Ubuntu', sans-serif;
}
div {
display: block;
}
.header-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.container {
margin-right: auto;
margin-left: auto;
width: 940px;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
#header {
height: 60px;
padding: 20px 0 25px 0;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
width: 270px;
height: 60px;
text-indent: -999em;
line-height: 60px;
background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px;
background-size: 270px 60px;
}
#header .american-flag {
display: block;
float: right;
}
#header .american-flag img {
max-height: 60px;
}
#content {
height: 100%;
padding: 20px 0 0 0;
}
body a {
color: red;
text-decoration: none;
}
body a:hover {
text-decoration: underline;
}
.footer-wrapper {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
}
#footer {
line-height: 60px;
height: 60px;
}
<html>
<body>
<div class="header-wrapper">
<div class="container" id="header">
<div class="logo">
<a href="/">URL</a>
</div>
<div class="american-flag">
FLAG
</div>
</div>
</div>
<div class="container" id="content">
Site content
</div>
<div class="footer-wrapper">
<div class="container" id="footer">
footer
</div>
</div>
</body>
</html>
答案 4 :(得分:0)
我会在这些情况下使用 Flexbox 。
只需更改
html {
overflow-y: scroll;
}
到
html, body {
height: 100%;
}
将display: flex
和flex-direction: column
添加到您的身体
body {
margin: 0;
background-color: #ffffff;
font-family: 'Ubuntu', sans-serif;
display: flex;
flex-direction: column;
}
最后将margin-top: auto
添加到您的页脚包装器
.footer-wrapper {
margin-top: auto;
}
答案 5 :(得分:-1)
ith不满意吗?
#footer {
line-height: 60px;
height: 60px;
position:absolute;
bottom:0;
}