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
在較大的分辨率下，我需要兩列才能進入頁面的底部。左側列在大分辨率顯示器上停止一半左右。 –