Question

我试图让导航背景图像与我的页面高度相同，我无法弄清楚如何。我尝试过在这个网站上发现的一堆不同的东西无济于事。我是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 &copy; 2015 Natasha Schmidt
                    </footer>
                </div>

    </body>
</html>

Answer 1

为什么把你的bg放在导航中？

要么全高呢

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;
}

并从导航中删除背景。

导航背景图像100％页面高度

1 个答案: