我这里有两个问题！我多年前曾经是一名网页设计师，但最近我做得不多 - 所以我忘记了其中的一些！我已经在网上查了一下，我觉得我的代码存在问题，我很遗憾，所以我想我是否能看到其他人是否能看到我做错了什么。
我已尝试使用sticky footer，但我希望将文本放在页脚中心。我一直试图使用填充，但是你必须向下滚动才能看到页脚。人们如何建议我现在垂直居中？
此外，如何将内容框一直拉伸到页脚，无论是否有文本？我在下面附上了HTML和CSS代码。非常感谢提前！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home :: Website Name</title>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css' />
<link href="/styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<header>
<div id="header-content">
<div id="header-left">
<h1 id="header-title"><a href="/" id="header-title">Website Name</a></h1>
</div>
<div class="searchbar-wrapper">
<form class="searchbar-wrapper">
<input id="searchbar" type="search">
</form>
</div>
<div id="header-right">
<nav>
<a class="nav" href="/road/">Road</a>
<a class="nav" href="/rail/">Rail</a>
<a class="nav" href="/air/">Air</a>
<a class="nav" href="/sea/">Sea</a>
</nav>
</div>
</div>
</header>
<div id="content-wrapper">
<aside>
<div class="sidebarContainer">
<img src="/assets/10646866_863581873661627_2031997718155527748_n (1).jpg" height="40px" width="40px" style="border-radius:20px;float:left;" />
<div style="float:left;margin:8px 10px 0;"><h2>Hello again, Allan!</h2></div>
</div>
<div class="sidebarContainer">
<h3>Your Profile</h3>
<ul class="ul-links">
<a href="/" class="li-links" ><li class="li-linklist">Timeline Posts</li></a>
<a href="/" class="li-links" ><li class="li-linklist">Messages</li></a>
<a href="/" class="li-links" ><li class="li-linklist">Notifications</li></a>
<a href="/" class="li-links" ><li class="li-linklist">Events</li></a>
</ul>
</div>
<div class="sidebarContainer">
<h3>Road Favourites</h3>
<ul class="ul-links">
<a href="/" class="li-links" ><li class="li-linklist">R178 NPN (Volvo B6BLE)</li></a>
<a href="/" class="li-links" ><li class="li-linklist">WG65 DDU (ADL Enviro 400)</li></a>
<a href="/" class="li-links" ><li class="li-linklist">CK03 TWD (Vauxhall Astra)</li></a>
</ul>
</div>
<div class="sidebarContainer">
<h3>Rail Favourites</h3>
<ul class="ul-links">
<a href="/" class="li-links" ><li class="li-linklist">Timeline Posts</li></a>
<a href="/" class="li-links" ><li class="li-linklist">Messages</li></a>
<a href="/" class="li-links" ><li class="li-linklist">Notifications</li></a>
</ul>
</div>
</aside>
<section class="wSidebar">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
</section>
</div>
</div>
<div class="push"></div>
<footer>
<div class="footer-wrapper">
<div id="footer-left">
<p>Copyright Information</p>
</div>
<div id="footer-right">
<p>Footer Menu</p>
</div>
</div>
</footer>
</body>
</html>{{1}}＆＃13;
答案 0 :(得分：0)
尝试删除push div并清除页脚浮动
'data:changed'/* Designed by Allan Wagner */
/* -font-family: 'Bitter', serif;- and -font-family: 'Montserrat', sans-serif;- */
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #EEE;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -80px;
}
/* bottom margin is the negative value of the footers height */
/* Header Left*/
header {
margin: 0;
padding: 0;
background: #FF4C4F;
}
#header-content {
margin: 0 auto;
padding: 0;
width: 960px;
overflow: auto;
}
#header-left {
margin: 0;
padding: 0;
float: left;
}
#header-title {
margin: 10px 0;
padding: 0;
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 28px;
color: #EEE;
text-decoration: none;
}
#header-title:hover {
color: #FFF;
}
/* Header Right */
#header-right {
margin: 10px 0;
padding: 0;
float: right;
}
.searchbar-wrapper {
margin: 5px 10px;
padding: 0;
float: left;
width: 440px;
}
#searchbar {
margin: 0 auto;
padding: 4px;
float: left;
font-size: 20px;
border-radius: 5px;
outline: none;
border: #999 thin solid;
width: 100%;
}
#searchbar:hover {
outline: none;
border: #333 thin solid;
}
#searchbar:active {
outline: none;
border: #000 thin solid;
}
nav {
margin: 8px 10px 0;
padding: 0;
float: right;
}
.nav {
margin: 0 2px 0;
padding: 5px 10px;
float: none;
background: #BC2225;
border-radius: 5px;
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #EEE;
text-decoration: none;
}
.nav:hover {
color: #FFF;
background: #A11C1E;
}
/* Main Content */
#content-wrapper {
margin: 0 auto;
padding: 0;
float: none;
width: 960px;
height: auto;
overflow: visible;
}
/* Sidebar */
aside {
margin: 0;
padding: 0 10px 10px;
background: #BBB;
height: auto;
width: 270px;
float: left;
overflow: auto;
}
.sidebarContainer {
margin: 10px 0 0 0;
padding: 0;
width: 100%;
float: left;
}
.ul-links {
list-style: none;
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #222;
text-decoration: none;
}
.li-linklist {
padding: 0 7px 0;
border: none;
}
.li-linklist:hover {
padding: 0 6px 0;
border-left: #000 thin solid;
}
.li-links {
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
.li-links:hover {
color: #000;
}
section {
margin: 0;
padding: 0;
}
.wSidebar {
float: right;
width: 650px;
padding: 10px;
background: #FFF;
overflow: auto;
}
/* Footer */
footer,
.push {
height: 80px;
clear: both;
}
/* push must be the same height as footer */
footer {
margin: 0;
padding: 0;
height: 40px;
width: 100%;
background: #FF4C4F;
}
.footer-wrapper {
margin: 0 auto;
padding: 0;
width: 960px;
height: 100%;
line-height: 40px;
}
#footer-left {
margin: 0;
padding: 0;
float: left;
}
#footer-right {
margin: 0;
padding: 0;
float: right;
line-height: 40px;
}
/* Text Formatting */
h1 {
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 22px;
}
h2 {
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
}
h3 {
font-family: "Montserrat", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
}
p {
font-family: "Bitter", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size: 16px;
font-weight: 400;
}
.pstyle {
font-family: "Bitter", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size: 16px;
font-weight: 400;
}
答案 1 :(得分：0)
https://jsfiddle.net/61jdyxqu/2/
的CSS：
/* general layout settings */
* {
margin:0;
}
html, body {
height:100%;
}
.wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -80px;
}
.footer, .push {
height:80px;
}
.header-wrapper,
.content-wrapper,
.footer-wrapper{
width:960px;
}
.header-wrapper:after,
.content-wrapper:after,
.footer-wrapper:after{
content:"";
display:block;
clear:both;
}
.header .left-content,
.header .center-content,
.content .left-content,
.content .center-content,
.footer .left-content,
.footer .center-content{
float:left;
}
.header .left-content,
.content .left-content,
.footer .left-content{
width:250px;
}
.header .center-content,
.content .center-content,
.footer .center-content{
width:710px;
}
/**/
HTML：
<!-- Page -->
<div class="wrapper">
<div class="header">
<div class="header-wrapper">
<div class="header-content">
<div class="left-content">Logo</div>
<div class="center-content">Menu</div>
</div>
</div>
</div>
<div class="content">
<div class="content-wrapper">
<div class="left-content">Aside</div>
<div class="center-content">Content</div>
</div>
</div>
<div class="push"></div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-wrapper">
<div class="footer-content">
<div class="left-content">Copyright</div>
<div class="center-content">2015</div>
</div>
</div>
</div>