0
我目前失去了如何处理我的问题。我有一个双列布局，有一个固定的页眉和页脚。我希望身体中的列一直走到页面的底部，我一直在玩100％的高度，JS等，但我似乎无法找到任何工作。我的代码如下：使用固定页脚获取列到页面底部
HTML：
<html lang="en">
<head>
<title>My Title</title>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<!--CSS Styling-->
<link rel="stylesheet" type="text/css" href="CSS/basic.css">
</head>
<body>
<!-- Header-->
<header>
<div id="header-container">
<!-- Hidden heading for outline -->
<h1>Main Title </h1>
<a href="index.html"><img src="Images/header-logo.jpg" alt="header-logo" width="220" height="50"/></a>
<nav class="clearFix">
<ol>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
</ol>
</nav>
</div>
</header>
<!--Main-->
<div id="wrapper">
<main class="gridSystem clearFix">
<section class="grid" id="home">
<h1>Welcome to Site</h1>
<img class="headshot" src="Images/headshot.jpg" alt="brittany-headshot" width="300" height="300"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</section>
<section class="grid" id="home-services">
<h2>Services Offered</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</section>
</main>
</div>
<footer><p>Copyright | © 2014 </p></footer>
</body>
</html>
CSS：
*{border: none;
margin: 0;
padding:0;}
body{font-family: Arial, Helvetica, sans-serif;
background-color: #828282;
}
#wrapper{
position: relative;
top: 65px;
margin: 0 auto;
width: 940px;
background-color: #828282;
height:100%;
}
/* Header*/
header{
height: 60px;
width: 100%;
background-color: #000000;
margin: 0px;
border-bottom: 5px solid #f0f0f0;
position: fixed;
z-index: 5;
}
#header-container{
width:940px;
height: 50px;
margin: 0 auto;
}
header img{
margin-left: 0px;
margin-top: 5px;
float:left;
}
header h1{
display: none;
}
/* Navigation */
nav{
float:left;
margin-top: 30px;
margin-left: 0px;
font-size: 18px;
color: black;
font-weight: 300;
}
nav li{
display: inline-block;
width: 100px;
padding-right: 0px;
padding-left: 0px;
margin: 0;
background-color: #424242;
margin-left: 15px;
}
nav li:first-child{
margin-left: 20px;
}
nav ol {
display: inline-block;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
nav a {text-decoration: none;
margin: 0;
}
/*General Styling*/
h1{
font-size: 30px;
}
h1,h2,h3,p{
padding-bottom: 20px;
}
ul{
margin:0px 20px;
}
a:link {color:#999999;} /* unvisited link */
a:visited {color: #999999;}
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
/*--index.html--*/
.grid{
display:block;
margin: 0px 20px 20px 0;
padding: 20px;
float: left;
}
#home{
width: 580px;
background-color: #c0c0c0;
}
#home-services{
width: 260px;
background-color: #c0c0c0;
margin: 0;
}
.headshot{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
/*--grid--*/
.gridSystem{
margin-right: -20px;
}
/* -- footer --*/
footer p {font-size: 10px;
color:#f0f0f0;
text-align: center;
line-height: 30px;
}
footer {border-top: 5px solid #f0f0f0;
height: 30px;
width: 100%;
background-color: #000000;
color: #ffffff;
position: fixed;
bottom: 0;
}
/*--ClearFix--*/
.clearFix:after {
clear: both;
display: table;
content: "";
overflow: hidden;
}
任何人都可以在这里可能借我个忙吗？这将不胜感激。
我不清楚你实际上想要什么。左栏已经在正确的位置，对吗？而正确的一个必须与底部对齐而不是左对齐？ – Siyah
在较大的分辨率下，我需要两列才能进入页面的底部。左侧列在大分辨率显示器上停止一半左右。 –