1. 首页
  2. 问答
  3. 2栏CSS布局，但导航栏就不会延伸到

2栏CSS布局，但导航栏就不会延伸到

2017-02-28 64 views
0
页

的底部的目的是设置一个2列CSS布局。课堂上的课本让它听起来就像编辑CSS Nav让它向左浮动一样简单。但是，它不会延长导航栏一路到页面的底部，如他们的例子显示，但它浮在左上角。2栏CSS布局，但导航栏就不会延伸到

CSS：

body{ 
    background-color: #ffffff; 
    color: #666666; 
    font: sans-serif; 
    background-image: url(background.jpg); 
} 

header{ 
    background-color: #000033; 
    color: #ffffff; 
    font: sans-serif; 
} 

nav{ 
    float: left; 
    width: 90px; 
    position: absolute; 
    background-color: #90c7e3; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 5px; 
} 

main{ 
    display: block; 
} 
h1{ 
    line-height: 200%; 
    background-image: url(sunset.jpg); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-left: 20px; 
    height: 72 px; 
    margin-bottom: 0; 
} 

h2 
{ 
    color: #3399cc; 
    font: serif; 
} 

h3 
{ 
    color: #000033; 
} 

dt 
{ 
    color: #000033; 
    font-weight: bold; 
} 

    #resort 
{ 
    color: #000033; 
    font-size: 1.2em; 
} 

    #footer 
{ 
    margin-left: 100px; 
    padding: 10px; 
    font-size: .7em; 
    font-style: italic; 
    text-align: center; 
} 

    #wrapper 
{ 
    background-color: #ffffff; 
    min-width: 700px; 
    max-width: 1024px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
    box-shadow: 5px 5px 5px #000033; 
} 

    #homehero 
{ 
    height: 300px; 
    background-image: url(coast.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

    #yurthero 
{ 
    height: 300px; 
    background-image: url(yurt.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

    #trailhero 
{ 
    height: 300px; 
    background-image: url(trail.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
}

HTML：

<!doctype html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="pacific.css"> 
    <title>Pacific Trails Resort</title> 
    <meta charset="UTF-8"> 
</head> 
<body> 
<div id="wrapper"> 
<header> 
    <h1>Pacific Trails Resort</h1> 
</header> 

<nav> 
    <a href="index.html">Home</a> &nbsp; &nbsp; &nbsp; 
    <a href="yurts.html">Yurts</a> &nbsp; &nbsp; &nbsp; 
    <a href="activities.html">Activities</a> &nbsp; &nbsp; &nbsp; 
    <a href="reservations.html">Reservations</a> 
</nav> 

<div id="homehero"> 
</div> 

<main> 
    <h2>Enjoy Nature in Luxury</h2> 
    <p><span class="resort">Pacific Trails Resort</span> offers a special  lodging experience on the California North Coast. Relax in serenity with  panoramic views of the Pacific Ocean.</p> 

<ul> 
    <li>Private yurts with decks overlooking the ocean</li> 
    <li>Activities lodge with fireplace and gift shop</li> 
    <li>Nightly fine dining at the Overlook Cafe</li> 
    <li>Heated outdoor pool and whirlpool</li> 
    <li>Guided hiking tours of the redwoods</li> 
</ul> 
    <div> 
     <span class="resort">Pacific Trails Resort</span><br> 
     12010 Pacific Trails Road<br> 
     Zephyr, CA 95555<br> 
     888-555-5555<br> 
    </div> 
</main> 
<footer> 
    <div id="footer"> 
    Copyright &copy; 2016 Pacific Trails Resort<br> 
    </div> 
</footer> 
</div> 
</body> 
</html>

来源

2017-02-28 dcvl

+0

你可以主要元素上使用浮动权，然后给NAV的高度将其扩展到页面的底部，但我认为你homehero最终会推动你的主要元素的页面的底部。 –

回答

0

正如我在我的评论指出，可以在主元素添加浮动权，然后给NAV的高度。您还需要限制主元素的宽度，以便它适合导航。

退房这个片段看到这样的：

body{ 
 
    background-color: #ffffff; 
 
    color: #666666; 
 
    font: sans-serif; 
 
    background-image: url(background.jpg); 
 
    position: relative; 
 
} 
 

 
header{ 
 
    background-color: #000033; 
 
    color: #ffffff; 
 
    font: sans-serif; 
 
} 
 

 
nav{ 
 
    width: 90px; 
 
    position: absolute; 
 
    background-color: #90c7e3; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    padding: 5px; 
 
    height: 100%; 
 
} 
 

 
main{ 
 
    display: block; 
 
    float: right; 
 
    width: 80%; 
 
} 
 
h1{ 
 
    line-height: 200%; 
 
    background-image: url(sunset.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    padding-left: 20px; 
 
    height: 72 px; 
 
    margin-bottom: 0; 
 
} 
 

 
h2 
 
{ 
 
    color: #3399cc; 
 
    font: serif; 
 
} 
 

 
h3 
 
{ 
 
    color: #000033; 
 
} 
 

 
dt 
 
{ 
 
    color: #000033; 
 
    font-weight: bold; 
 
} 
 

 
    #resort 
 
{ 
 
    color: #000033; 
 
    font-size: 1.2em; 
 
} 
 

 
    #footer 
 
{ 
 
    margin-left: 100px; 
 
    padding: 10px; 
 
    font-size: .7em; 
 
    font-style: italic; 
 
    text-align: center; 
 
} 
 

 
    #wrapper 
 
{ 
 
    background-color: #ffffff; 
 
    min-width: 700px; 
 
    max-width: 1024px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 80%; 
 
    box-shadow: 5px 5px 5px #000033; 
 
} 
 

 
    #homehero 
 
{ 
 
    height: 300px; 
 
    background-image: url(coast.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
    #yurthero 
 
{ 
 
    height: 300px; 
 
    background-image: url(yurt.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
    #trailhero 
 
{ 
 
    height: 300px; 
 
    background-image: url(trail.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="pacific.css"> 
 
    <title>Pacific Trails Resort</title> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
<header> 
 
    <h1>Pacific Trails Resort</h1> 
 
</header> 
 

 
<div id="wrapper"> 
 
<nav> 
 
    <a href="index.html">Home</a> &nbsp; &nbsp; &nbsp; 
 
    <a href="yurts.html">Yurts</a> &nbsp; &nbsp; &nbsp; 
 
    <a href="activities.html">Activities</a> &nbsp; &nbsp; &nbsp; 
 
    <a href="reservations.html">Reservations</a> 
 
</nav> 
 

 
<main> 
 
    <div id="homehero"> 
 
</div> 
 
    <h2>Enjoy Nature in Luxury</h2> 
 
    <p><span class="resort">Pacific Trails Resort</span> offers a special  lodging experience on the California North Coast. Relax in serenity with  panoramic views of the Pacific Ocean.</p> 
 

 
<ul> 
 
    <li>Private yurts with decks overlooking the ocean</li> 
 
    <li>Activities lodge with fireplace and gift shop</li> 
 
    <li>Nightly fine dining at the Overlook Cafe</li> 
 
    <li>Heated outdoor pool and whirlpool</li> 
 
    <li>Guided hiking tours of the redwoods</li> 
 
</ul> 
 
    <div> 
 
     <span class="resort">Pacific Trails Resort</span><br> 
 
     12010 Pacific Trails Road<br> 
 
     Zephyr, CA 95555<br> 
 
     888-555-5555<br> 
 
    </div> 
 
</main> 
 
</div> 
 
<footer> 
 
    <div id="footer"> 
 
    Copyright &copy; 2016 Pacific Trails Resort<br> 
 
    </div> 
 
</footer> 
 
</body> 
 
</html>

我注意到，你对资产净值的绝对位置。我跑了，并相对于身体定位。我也感动页眉和页脚出的包装的div，这样包装只包含您的导航和主要内容。我把家庭英雄移到了主要元素中，这样它也会正确地浮动。

通过仅在包装包装的主要和NAV元素，我们可以添加height: 100%;的导航元素把包装的整个高度。如果我们不停地在包装的页眉和页脚，资产净值仍然是包装的高度的100％，但现在它是太大，因为它不打折的页眉和页脚的高度。

另外需要注意的是，我删除了导航上的float: left;，因为position: absolute;使其无关紧要。

来源

2017-02-28 17:35:31

相关问题

 相关问题