2列のCSSレイアウトですが、ナビゲーション列はページの末尾まで伸びません

目的は2列のCSSレイアウトを設定することです。クラス内のテキストブックは、CSS Navを左に浮かべて編集するのと同じくらい簡単に聞こえます。ただし、例のように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

メイン要素の右側に浮動小数点を使用して、ナビゲーションの高さをページの下まで拡大することができますが、ホームヒーローがメイン要素をページの最後まで押し上げることになります。 –

、あなたは右のメイン要素にfloatを追加し、NAVに高さを与えることができます。また、メイン要素の幅をナビゲーションの横に収まるように制限する必要があります。このスニペット

チェックアウトは、これを見るために：私はあなたが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>

。私はそれを実行し、それを身体に対して相対的に配置した。また、ラッパーにあなたのnavとmain要素だけが含まれるように、ヘッダーとフッターをラッパーdivから移動しました。私は家の主人公を主要な要素に移しました。それで、それも正しく浮かびます。

main要素とnav要素をラッパーでのみラップすると、height: 100%;をnav要素に追加して、ラッパーの高さ全体を取得できます。ヘッダーとフッターをラッパーに入れておくと、そのラッパーの高さの100％になりますが、ヘッダーとフッターの高さを割り引かないため、大きすぎます。

もう1つ注意すべきことは、position: absolute;が無関係であるため、ナビ上でfloat: left;を削除したことです。

出典

2017-02-28 17:35:31

2列のCSSレイアウトですが、ナビゲーション列はページの末尾まで伸びません

答えて

関連する問題