我试图让我的侧导航栏（nav）始终到达其容器的底部（文章）。我尝试了很多不同的方法，但似乎没有什么是正确的。我在（nav）的右侧有一个边框，我希望它始终延伸到（文章）的底部，从内容文本中提供一个分隔符。我的一些页面也没有正确缩放，我不太清楚要去哪里。请帮我。
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background-image: url("images/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
text-size: 100%;
}
html {
color: white;
}
/* ---------------------- Page Container ---------------------- */
.wrapper {
background-color: rgb(18, 18, 18);
width: 90%;
max-width: 1000px;
min-width: 600px;
max-height: 100%;
margin: 0 auto;
padding: 0;
opacity: 0.85;
display: table;
}
/* ---------------------- End Page Container ---------------------- */
/* ----------------------Header---------------------- */
header {
width: 100%;
max-height: 100%;
margin: 0 0 1em 0;
padding: 0;
}
header img,
header h1 {
display: inline-block;
margin-bottom: 0;
padding: 0;
}
header img {
margin: .3em;
}
header h1 {
text-shadow: 3px 3px 8px DarkKhaki;
font-size: 2.7em;
padding: 0 .05em;
}
header nav {
border-top: 2px solid DarkKhaki;
border-bottom: 2px solid DarkKhaki;
background-color: black;
opacity:0.7;
width: 85%;
max-height: 100%;
margin: .3em auto 0;
padding: 1em 0;
text-align: center;
}
header nav a {
color: white;
text-decoration: none;
margin: 0;
transition: color .3s;
padding: 0 .7em;
font-size: 1.2em;
}
header nav a:hover {
color: DarkKhaki;
}
/* ---------------------- End Header ---------------------- */
/* ---------------------- Main Content Area ---------------------- */
article {
border: 2px solid DarkKhaki;
background-color: black;
opacity:0.7;
width: 85%;
max-height: 100%;
margin: 0 auto 1em;
padding: 0 0 1em;
text-align: center;
}
article p {
padding: 0 .3em;
}
article h1 {
color: DarkKhaki;
}
/* ---------------------- Project Images ---------------------- */
.projectImage {
display: inline-block;
margin: .5em .5em;
}
.projectImage a {
text-decoration: none;
color: white;
font-size: .8em;
}
.projectImage a:hover {
color: DarkKhaki;
}
.projectImage img {
width: 110px;
height: 83px;
margin-top: .4em;
}
.projectImage img:hover {
border: 2px solid black;
}
div.projectContent img {
width: 100px;
height: 73px;
}
/* ---------------------- End Project Images ---------------------- */
/* ---------------------- Side Navigation for Projects ---------------------- */
article nav {
display: inline-block;
width: 15%;
max-width: 15%;
vertical-align: top;
border-right: 1px solid gray;
padding: 0;
margin: .5em 0;
}
article nav a {
display: block;
color: white;
text-decoration: none;
transition: color .2s;
text-align: left;
margin: .6em 0 .6em .6em;
}
article nav a:hover {
color: DarkKhaki;
}
/* ---------------------- End Side Navigation for Projects ---------------------- */
/* ---------------------- Project Content Area ---------------------- */
.projectContent {
display: inline-block;
width: 85%;
max-width: 85%;
padding: 0 2em;
}
/* ---------------------- End Project Content Area ---------------------- */
/* ---------------------- Resume Page ---------------------- */
aside {
display: inline-block;
vertical-align: top;
width: 20%;
}
aside img {
display: block;
width: 40px;
height: 40px;
margin: 1em auto;
}
aside img:hover {
border: 2px solid black;
}
section {
display: inline-block;
text-align: left;
width: 80%;
padding: 0 0 0 1em;
}
/* ---------------------- End Resume Page ---------------------- */
/* ---------------------- End Main Content Area ---------------------- */
/* ---------------------- Footer ---------------------- */
footer {
border-left: 2px solid DarkKhaki;
border-top: 2px solid DarkKhaki;
border-right: 2px solid DarkKhaki;
background-color: black;
opacity:0.7;
display: table;
width: 85%;
margin: 0 auto;
padding: 0;
}
footer p {
font-size: 0.5em;
padding: .2em .5em;
}
/* ---------------------- End Footer ---------------------- */<!doctype html />
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Danny Steveson Portfolio</title>
<link href="_mainStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/titleLogo.png" />
</head>
<body>
<div class="wrapper">
<header>
<a href="default.html" title="Home Page">
<img src="images/logo.png" style="width: 106px; height: 106px;" alt="Logo" /></a>
<h1>Danny Steveson Portfolio</h1>
<nav>
<a href="mainWebDesign.html">Web Design</a>
<a href="mainGameDesign.html">Game Design</a>
<a href="mainDatabases.html">Databases</a>
<a href="mainResume.html">Resume</a>
<a href="mainContact.html">Contact</a>
</nav>
</header>
<article>
<nav>
<a href="WDallGolf.html" style="color:DarkKhaki;">Description</a>
</nav><!--
--><div class="projectContent">
<h1>AllGolf.com</h1>
<p>This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br />This text will go past the height of the page causing it to scroll.<br /></p>
</div>
</article>
<footer>
<p>Created by: Danny Steveson 2015</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
此Fiddle可以满足您的需求。 我所做的是几件事：
position: relative;
display: inline-block;
float: right;
float: left;添加到导航:before元素，该文章在导航:after在文章中添加clear: both;元素（使用浮动元素时必需）before元素在某种程度上是一种黑客攻击，但肯定会有诀窍。
希望这有帮助