Question

我正在尝试使导航栏覆盖所有右侧，如图所示。我不知道。我尝试了一切，但仍然无法解决。任何建议表示赞赏。

<!doctype html>
<html lang="en">
<head>
<title>
Lighthouse Island Bistro
</title>
<link rel="stylesheet" type="text/css" href="tes.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Lighthouse Island Bistro</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>Locally Roasted Free-Trade Coffe</h2>
<p>Indulge in the aroma of freshly ground coffe. Speciality drinks are               
available hot or cold</p>
<h2>Speciality Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including     
fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicios wraps and sandwiches on hearty, whole-grain breads with     
locally-grown salad, fruit, and vegetables.</p>
<h2>Panoramic View</h2>
<p>Take in some scenery! <br> The top of our lighthouse offers a 
panoramic view of the countryside. Challenge your friends to climb our     
100-stair tower.</p>
</main>
<footer>
Copyright &copy; 2016
</footer>
</div>
</body>
</html>

这是我的CSS：

body
{
background-color: #010d91; 
margin: 0;
}
#wrapper
{
width: 80%;
margin: 0 auto;
background-color: white;
color: black;
}
h1
{
font-size: 50px;
text-align: center;
}
header
{
background-color: #5995f7;
padding: 10px 10px 10px 10px;   
}
nav
{
float: right;
width: 150px;
font-weight: bold;
letter-spacing: 0.1em;
}
main
{
padding:10px 20px;
color: #000000;
display: block;
overflow: auto;
}
h2
{
color: #869dc7;
}
nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav a
{
text-decoration: none;
padding: 20px;
display: block;
background-color: #89c6ed;
border-bottom: 1px solid #FFFFFF;
}
nav a:link
{
color:#ffffff
}
nav a:visited
{
color: #eaeaea;
}   
nav a:hover
{
color: #869dc7;
background-color: #eaeaea;
}
footer
{
text-align: center;
font-style: italic;
font-size: small;
padding-top: 5px;
padding-bottom: 5px;
background-color: #5995f7;
}

我的看起来像这样： https://i.imgur.com/PKaa0W5.png

我希望我的导航栏能覆盖整个过程，就像下面这样： https://i.imgur.com/h2navpU.png

Answer 1

我只需进行少量更改即可更新您的代码，希望对您有所帮助。谢谢

在<nav>中包装<main>和<div id="content-wrapper">，并为content-wrapper编写 CSS ，并在{{1 }} CSS 。

background-color: #89c6ed;

nav

#content-wrapper {
    display: flex;
    flex-direction: row-reverse;    
}

Answer 2

在您的nav元素中添加：

height:100%;

Answer 3

像Ernie所述，请尝试添加 height:100%转到您的导航元素。

如果仍然不起作用，您可以尝试使用

nav { height: 100vh; }

https://snook.ca/archives/html_and_css/vm-vh-units

导航栏未完全覆盖

3 个答案: