2017-01-29 10 views
0

ページの下部(および左右)に付いたフッターdivが必要です。しかし、私のフッターのdivは、すべての道を下って行くことはありません。これをどうすれば解決できますか? (なし "の位置:固定;")フッターdivはページの一番下に固執しません

は、ここに私のコードません。(私はドットにすべてのテキストを変更し、フッターのdivがコードの最後のdiv要素である

body { 
 
\t font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
\t height: 100%; 
 
\t margin: 0px; 
 
\t background-color: #FFFFFF; 
 
\t overflow-x: hidden; 
 
} 
 

 
ul { 
 
\t position: fixed; 
 
    list-style-type: none; 
 
    margin-right: 0; 
 
\t margin-top: 0; 
 
\t margin-left: 0; 
 
\t right: 0px; 
 
\t left: 0px; 
 
    padding-left: 20px; 
 
\t padding-right: 0px; 
 
    overflow: hidden; 
 
    background-color: #262626; 
 
\t z-index: 2; 
 
\t top: 0px; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: #b3b3b3; 
 
    text-align: center; 
 
    padding: 18px 20px; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
\t color:white; 
 
} 
 

 
li img { 
 
\t padding-left: 0px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: fixed; 
 
    background-color: #262626; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: #bfbfbf; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #4d4d4d; 
 
\t \t \t \t \t \t \t color: white;} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t color: #262626; 
 
\t font-family: proxima-nova, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t font-size: 45px; 
 
\t letter-spacing: 1.5px; 
 
\t margin-top: 88px; 
 
} 
 

 
h4 { 
 
\t position: relative; 
 
\t left: 100px; 
 
\t text-align: left; 
 
\t color: #404040; 
 
\t font-size: 16 px; 
 
\t letter-spacing: 0.8px; 
 
\t line-height: 34px; 
 
\t background-color: transparent; 
 
\t word-spacing: 0.5px; 
 
} 
 

 
.albumcovers { 
 
\t position: relative; 
 
\t float: right; 
 
\t margin-right: 5px; 
 
} 
 

 
.audio1 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t left: 320px; 
 
\t bottom: 342px; 
 
} 
 

 
.audio2 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t right: 186px; 
 
\t bottom: 307px; 
 
} 
 

 
.audio3 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t left: 320px; 
 
\t bottom: 316px; 
 
} 
 

 
.audio4 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t right: 186px; 
 
\t bottom: 281px; 
 
} 
 

 
.audio5 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t left: 320px; 
 
\t bottom: 290px; 
 
} 
 

 
.audio6 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t right: 186px; 
 
\t bottom: 255px; 
 
} 
 

 
.audio7 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t left: 320px; 
 
\t bottom: 264px; 
 
} 
 

 
.audio8 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t right: 186px; 
 
\t bottom: 229px; 
 
} 
 

 
.audio9 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t left: 320px; 
 
\t bottom: 238px; 
 
} 
 

 
.audio10 { 
 
\t position: relative; 
 
\t width: 500px; 
 
\t right: 186px; 
 
\t bottom: 203px; 
 
} 
 

 
.dec1 { 
 
\t text-align: center; 
 
\t color: #cccccc; 
 
\t font-size: 16px; 
 
\t position: relative; 
 
\t margin-bottom: 70px; 
 
\t word-spacing: 150px; 
 
} 
 

 
.footer { 
 
    position: relative; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding-left: 7px; 
 
    background-color: #1a1a1a; 
 
    text-align: left; 
 
    color: #666666; 
 
    font-size: 12px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title> 
 
\t \t . 
 
\t </title> 
 
\t <link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="PlaylistReggae.css"> 
 
\t <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
 
\t <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li><a href="hiphop.html"><img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;"></a></li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">.</a> 
 
    <div class="dropdown-content"> 
 
     <a href="Reggae.html">.</a> 
 
     <a href="OldSchool.html">.</a> 
 
     <a href="Modern.html">.</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">.</a> 
 
    <div class="dropdown-content"> 
 
     <a href="PlaylistReggae.html">.</a> 
 
     <a href="PlaylistOldSchool.html">.</a> 
 
     <a href="PlaylistModern.html">.</a> 
 
\t <a href="* Nog in te vullen *">.</a> 
 
    </div> 
 
    </li> 
 
    <li><a href="about.html">.</a></li> 
 
    <li><a href="contact.html">.</a></li> 
 
</ul> 
 

 
<h1>.</h1> 
 

 
<div class="dec1"> 
 
_____________________________________________________________________________________________________________________________ 
 
</div> 
 

 
<img class="albumcovers" src="albumreggae.png" alt="Reggae Album Covers" style="width:315px;height:317px;"> 
 

 
<h4> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 
\t <div>.</div> 
 

 
<audio controls class="audio1"> 
 
    <source src="TLB.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio2"> 
 
    <source src="CTD.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio3"> 
 
    <source src="ITL.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio4"> 
 
    <source src="BFS.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio5"> 
 
    <source src="SWT.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio6"> 
 
    <source src="CDP.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio7"> 
 
    <source src="MDR.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio8"> 
 
    <source src="WIV.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio9"> 
 
    <source src="NRS.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls class="audio10"> 
 
    <source src="MMD.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
</audio> 
 

 
<div class="footer">This is the footer.</div> 
 
</body> 
 
</html>

+0

「位置:固定;」はありません。 –

答えて

0

閉じるH4タグが見つからないように見えるので、ブラウザはフッターの後にある閉じたbodyタグの直前に暗黙的に追加します。の前に閉じるH4タグフッタ、あなたは行くのが良いはずです。

+0

soooたくさんありがとう!私は何が間違っているのか分かりませんでした。見たこともありませんでした。 – Mats

0

。フッタの前にh4を閉じる必要があります

+0

ありがとうございました! – Mats

0

あなたは3つの領域でテンプレートからあなたのHTML構造を構築することができます:headermain & footerと簡単下部に(プッシュ)あなたのフッターを修正するためにフレックスモデルを使用します。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
/* layout */ 
 

 
body { 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
main { 
 
    flex: 1; 
 
    overflow: auto; 
 
    background:tomato; 
 
} 
 
/* demo , show main scrolling*/ 
 

 
main:after { 
 
    content: ' end'; 
 
} 
 
main:hover:after { 
 
    display: flex; 
 
    align-items:flex-end; 
 
    height: 100vh; 
 
}
<header>stuff that comes in header. Any height</header> 
 
<main>content that comes here, ican overflow </main> 
 
<footer>fonter at view. Any height</footer>

あなたはmain内に挿入し、headerを固定したくない場合は、それはmainコンテンツの残りの部分と上にスクロールします。

関連する問題