尽管尝试了我搜索过的多种方法，但我似乎无法让这个页脚贴在底部。
基本上我的标题在顶部，带有一个框阴影，将它与页面的其余部分分开，我希望在底部有相同的内容，内容在中间，知道我做错了什么吗？我已经尝试过位置固定，底部 0，但我无法使用这些方法显示框阴影或使其居中。
谢谢!
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>最佳答案
我已经申请了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>关于html - 在底部粘贴 CSS 页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40658853/