我试图让导航背景图像与我的页面高度相同，但我不知道该怎么做。我尝试了在此站点上发现的许多不同的东西，但无济于事。我是 HTML5 和 CSS 的新手，如果这是一个愚蠢的问题，我深表歉意。这是我的 CSS:
body {
background-color: #FF9933;
}
header {
background-image: url(orangesquares.png);
}
h1 {
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
width: 275px
}
h2 {
color: #FF9933;
}
nav {
background-image: url(orangesquares.png);
float: left;
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
nav ul {
list-style-type: none;
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
}
#rightcolumn {
margin-left: 205px;
background-color: #ffffff;
color: #000000;
width: 80%;
}
.content {
padding: 10px 20px 0 20px;
}
#footer {
text-align: center;
font-size: 11px;
}
a:link {
color: #0033FF;
}
a:visited {
color: #0033FF;
}
figure {
width: 500px;
border: 1px solid #FF9933;
padding: 5px;
}
figcaption {
text-align: center;
font-size: 2em;
}
这是索引页的 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sims 3 Open House</title>
<meta charset="utf-8">
<meta name="description" content="Sims 3 Open House provides information on houses included in the Sims 3 bin, such as what furniture is included and how many squares big the rooms are." />
<meta name="keywords" content="Sims 3, the sims 3, the sims, sims, open house, house, houses, home, homes, lots and houses bin, bin, premade, premade houses, lot size, house size, furniture" />
<link type="text/css" href="openhouse.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Sims 3 Open House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li><br>
<li><a href="index.html#onebedroom">One Bedroom Homes</a></li>
<ul>
<li>Cabin Fever</li>
<li>Super Shack</li>
</ul>
<li><a href="index.html#twobedrooms">Two Bedroom Homes</a></li>
<ul>
<li>Ginger</li>
<li>Oak Grove Bungalow</li>
</ul>
<li><a href="index.html#threebedrooms">Three Bedroom Homes</a></li>
<ul>
<li>Cornucopia</li>
<li>Doubleday Lodge</li>
</ul>
<li>Contact Us</li>
</nav>
<article>
<div id="rightcolumn">
<div class="content">
<h2>Welcome</h2>
<p>Ever want to use a house from the Sims 3 bin but you aren't sure which one? What do they look like inside? How big are they really? What kind of furniture do they have? Well, here you can find all that information! I have split the bin houses into categories by number of bedrooms to make your search easier. On each house's page there is detailed information about the layout of each house, how big the rooms are, and what furniture is included, plus general info like lot size and price. All screenshots were taken in <a href="http://www.thesims3.com/assetDetail.html?assetId=7016943">Sunset Valley 2</a>. </p>
<a id="onebedroom"><h2>One Bedroom Homes</h2></a>
<figure>
<img src="cabinfever.jpg" width="500px" alt="The front facade of the home Cabin Fever." />
<figcaption>
Cabin Fever
</figcaption>
</figure> <figure>
<img src="supershack.jpg" width="500px" alt="The front facade of the home Super Shack." />
<figcaption>
Super Shack
</figcaption>
</figure>
<a id="twobedrooms"><h2>Two Bedroom Homes</h2></a>
<figure>
<img src="ginger.jpg" width="500px" alt="The front facade of the home Ginger." />
<figcaption>
Ginger
</figcaption>
</figure>
<figure>
<img src="ogb.jpg" width="500px" alt="The front facade of the home Oak Grove Bungalow." />
<figcaption>
Oak Grove Bungalow
</figcaption>
</figure>
<a id="threebedrooms"><h2>Three Bedroom Homes</h2></a>
<figure>
<img src="cornucopia.jpg" width="500px" alt="The front facade of the home Cornucopia." />
<figcaption>
Cornucopia
</figcaption>
</figure>
<figure>
<img src="doubleday.jpg" width="500px" alt="The front facade of the home Doubleday Lodge." />
<figcaption>
Doubleday Lodge
</figcaption>
</figure>
</div>
<br>
<div id="footer">
<footer>
Home | One Bedroom Homes | Cabin Fever | Super Shack | Two Bedroom Homes | Ginger | Oak Grove Bungalow | Three Bedroom homes | Cornucopia | Doubleday Lodge | Contact Us
<br>
Copyright © 2015 Natasha Schmidt
</footer>
</div>
</body>
</html>
最佳答案
为什么要把你的背景放在导航中？
要么让它全高
nav
{
background-image: url(orangesquares.png);
background-size: cover;
float: left;
height:100%
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
或者我不知道，就这样吧
html{
padding:0; margin:0;background-image: url(orangesquares.png);
background-size: cover;
}
并从导航中移除背景。
关于css - 导航背景图像 100% 页面高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33308820/