2番目のdivの背景色が表示されません

私はcssとhtmlの新機能ですが、基本は分かっています。私は、異なるdivsの背景が異なるページを作成しようとしています。たとえば、ページの上部は、情報とボタンがある1つのdivで、実際のWebサイトのようなライセンス情報がページの下部に表示されます。2番目のdivの背景色が表示されません

私の問題は、上部のdivの背景色が表示されていますが、下部のdivの背景が表示されていません。私はしばらくの間撮影に問題があり、ここでの答えは私の問題に適用されないようです。ここで

は私のコードです： HTML：

<!DOCType HTML> 
<html> 
    <head> 
     <link rel="stylesheet" href="Styles.css"> 
    </head> 
    <body> 
     <div id = "Topper"> 
      <div style = "height: 500px;width: 800px"> 
       <h1><b>Lets Play a Game</b></h1> 
       <p>blah blah blah</p> 
       <a href="SecondPage.html"> 
        <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;""> 
       </a> 
      </div> 
     </div> 
     <div id= "Footer"> 
      <div style="position: absolute; bottom: 100px;"> 
       <p>This is a test for Location</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

#Topper { 
background-color: #E0E0E0; 
} 

p { 
    width: 500px; 
    border-style: hidden; 
    text-align: justify; 
    word-break: keep-all; 
} 
#Footer { 
    background-color: green; 
}

は、私は問題は、バックグラウンドの長さと幅である疑いがあるが、私は、私が何をすべきかわかりません私はすべてを試して感じる。私が背景全体を800で800にすることを試みたとしても、まだ表示されませんでした。

ps。私はあなたのページを実際にどのように見えるかを知っていませんが、ページの上部は灰色で、下部は緑色の背景なしの白です。

ありがとうございました！

出典

2017-07-11 HoldenMalinchock

なぜそれほど複雑なものを作成したのかは、非常に簡単に「フレックス」で得ることができます。 – LKG

私は自分の答えを更新し、同じレイアウトを得るために2番目のオプションを掲示しました。 – LKG

次のCSSを追加してインラインCSSを削除し、<a href="SecondPage.html">インラインCSSの最後に""を使用してください。

#Footer { 
    background-color: green; 
    position: absolute; 
    bottom: 100px; 
    width: 100%; /* Added */ 
}

#Topper { 
 
    background-color: #E0E0E0; 
 
} 
 

 
p { 
 
    width: 500px; 
 
    border-style: hidden; 
 
    text-align: justify; 
 
    word-break: keep-all; 
 
} 
 

 
#Footer { 
 
    background-color: green; 
 
    position: absolute; 
 
    bottom: 100px; 
 
    width: 100%; /* Added */ 
 
}

<div id="Topper"> 
 
    <div style="height: 500px;width: 800px"> 
 
    <h1><b>Lets Play a Game</b></h1> 
 
    <p>blah blah blah</p> 
 
    <a href="SecondPage.html"> 
 
     <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div id="Footer"> 
 
    <div> 
 
    <p>This is a test for Location</p> 
 
    </div> 
 
</div>

flexを使用して、それを得るための第二の方法。

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#Topper { 
 
    background-color: #E0E0E0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height:calc(100vh - 70px); /* 70px is your footer height */ 
 
} 
 

 
#Topper>div { 
 
    flex: 1; 
 
} 
 

 
#Footer>div { 
 
    flex: 1; 
 
} 
 

 
p { 
 
    width: 500px; 
 
    border-style: hidden; 
 
    text-align: justify; 
 
    word-break: keep-all; 
 
} 
 

 
#Footer { 
 
    background-color: green; 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    flex: 1; 
 
}

<div id="Topper"> 
 
    <div> 
 
    <h1><b>Lets Play a Game</b></h1> 
 
    <p>blah blah blah</p> 
 
    <a href="SecondPage.html"> 
 
     <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div id="Footer"> 
 
    <div> 
 
    <p>This is a test for Location</p> 
 
    </div> 
 
</div>

出典

2017-07-11 18:30:55 LKG

恐ろしい作品が大変ありがとうございます！ – HoldenMalinchock

しかし、それが2番目の理由でうまくいかなかった理由を説明できますか？それは私が2番目のもののためにしたのと同じ方法で最初のdivのために働いたが、今では私はちょうど底のものを変えただけで、彼らは両方ともなぜそれが働くのか？ – HoldenMalinchock

'position'を使うと、divはフローから出てくるので、それは親divの幅をとらないでしょう。だから私はdivを配置するために幅を割り当てた。 – LKG

あなただけ#Footer IDセレクタの後div要素を追加する必要があります。あなたは、これは絶対的であることを確認しかし

（#は、CSSファイル class and id selector in cssのidセレクタです）。

相対性と絶対性のpositionプロパティにはいくつかの関係があります。

#Footer div { 
    background-color: green; 
}

出典

2017-07-11 18:56:08

2番目のdivの背景色が表示されません

答えて

関連する問題