CSS divを伸ばして画面全体に伸ばします

Question

私はウェブサイトを作っています。ウェブサイトはトップにあるナビゲーションバーを使用しています。私が望むのは、バーがページの上部にあり、メインページとは別の色になることです。 は、ここに私の現在のコードです：

body { 
 
    font-family: "Baloo Bhaina"; 
 
} 
 

 
h1 { 
 
    margin-top: 250px; 
 
    font-size: 75px; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-left: 10px; 
 
    font-size: 20px; 
 
} 
 

 
#header { 
 
    background-color: DeepSkyBlue; 
 
    color: white; 
 
    display: inline; 
 
    padding-left: 100%; 
 
    padding-right: 100%; 
 
    padding-top: 20px; 
 
}

<div id="header"> 
 
    <a href="">Home</a> 
 
    <a href="">Products</a> 
 
    <a href="">Who we are</a> 
 
    <a href="">Contact Us</a> 
 
</div>

はCSSで参照される要素のいくつかは、appoligies HTMLに少しは無関係です。 ありがとう！それはいつものコメントで述べたように、ヘッダ要素が表示インラインすべきではない、トップ

width:100%; 
position:fixed; 

にスティッキーとどまるべきかどうヘッダの

Answer 1

これは修正NAV部分とコンテンツ部分が異なるbackground-colorと以下です。

body { 
 
    font-family: "Baloo Bhaina"; 
 
} 
 

 
h1 { 
 
    margin-top: 250px; 
 
    font-size: 75px; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #333; 
 
    margin: 5px; 
 
    font-size: 20px; 
 
} 
 

 
#header { 
 
    background-color: DeepSkyBlue; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    width:100%; 
 
    text-align:right; 
 
    position:fixed; 
 
    z-index:99; 
 
    left:0px; 
 
    top:0px; 
 
} 
 

 
#content { 
 
    width:100%; 
 
    background:tomato; 
 
    margin-top:45px; 
 
    padding:5px; 
 
}

<div id="header"> 
 
    <a href="">Home</a> 
 
    <a href="">Products</a> 
 
    <a href="">Who we are</a> 
 
    <a href="">Contact Us</a> 
 
</div> 
 
<div id="content"> 
 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
<br><br> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
<br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
    <br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
    <br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
    <br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
    <br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
    <br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex! 
 
</p> 
 
</div>

Answer 2

は

width:100%; 
position:relative; 

を行います。この答えは実際にそれが自分のポストだ値しませんが、私はコメントすることはできませんから、ここで私は行く100％とガスケットが

Answer 3

aswell私には奇妙に思える：

まず第一に、それは、リソースを持って、常に便利ですあなたの努力の中であなたを助ける手。この場合は、this siteのようなものをお勧めします。あなたの例については

：

#header { 
    background-color: DeepSkyBlue; 
    color: white; 
    display: inline; /* if you're trying to get your <a> tags aligned, it's probably better to do it another way. */ 
    width: 100%; /* done */ 
    /*padding-left: 100%; 
    padding-right: 100%; why would you even do this*/ 
    padding-top: 20px; 
} 

Answer 4

使用CSSのコードは

あなたは、トップの使用position:fixedとleftとrightプロパティ0pxでそれを修正したい場合。

body { 
 
    font-family: "Baloo Bhaina"; 
 
} 
 

 
h1 { 
 
    margin-top: 250px; 
 
    font-size: 75px; 
 
    text-align: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #333; 
 
    margin: 5px; 
 
    font-size: 20px; 
 
} 
 

 
#header { 
 
    background-color: DeepSkyBlue; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    width:100%; 
 
    text-align:right; 
 
}

<div id="header"> 
 
    <a href="">Home</a> 
 
    <a href="">Products</a> 
 
    <a href="">Who we are</a> 
 
    <a href="">Contact Us</a> 
 
</div>

Answer 5

私のコメント説明します

a { 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-left: 10px; 
 
    font-size: 20px; 
 
} 
 

 
#header { 
 
    background-color: DeepSkyBlue; 
 
    color: white; 
 
    padding-top: 20px; 
 
    text-align:center 
 
}

<div id="header"> 
 
    <a href="">Home</a> 
 
    <a href="">Products</a> 
 
    <a href="">Who we are</a> 
 
    <a href="">Contact Us</a> 
 
</div>

Answer 6

body { 
    font-family: "Baloo Bhaina"; 
    margin: 0; 
    padding: 0; 
    background: #000; 
} 
#header { 
background-color: DeepSkyBlue; 
    color: white; 
    padding: 20px; 
} 

絶対位置を使用していないが、＃ヘッダー{表示の必要はありません： 列をなして;幅：100％; }。これらの行を削除するコード