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

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

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;

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

出典

2017-04-18 JohnyNich

このコードの問題点は何ですか？ヘッダーが 'display：inline'に設定されているなど、いくつかの問題が考えられますが、あなたが見ているものと達成しようとしているものが分かっていなければ助けがありません。 – Toby

#headerに表示とパディングを削除し、リンクをセンタリングしている場合はテキストアライメントを追加してください。 –

パディング - 左：100％ものと申し訳ありません。私は物事をテストしていて、それらを削除するのを忘れていました。当時の神の考えのようだった。 – JohnyNich

これは修正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>

出典

2017-04-18 11:33:00 LKG

は

width:100%; 
position:relative;

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

出典

2017-04-18 11:21:02 RacoonOnMoon

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; 
}

出典

2017-04-18 11:21:29 Wep0n

使用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>

出典

2017-04-18 11:22:04 LKG

これは良いことですが、唯一のことは、画面の終わりに達して、それが境界線になっていて、ウェブサイトの残りの部分に境界線がないようにするために、ストレッチアウトする方が好きだということです。 – JohnyNich

私は 'width：100％'を使用しました。画面左側のlitbit spaceなら 'margin-left：0px;'を使うか、私の2番目の答えに行く – LKG

ええ、私がしなければならなかったことは、 'top'と' left'を0pxに設定したことです。そのように簡単です。 – JohnyNich

私のコメント説明します

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>

出典

2017-04-18 11:33:11

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

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

出典

2017-04-18 11:39:56 Qamar

コメントを使って答えに情報を追加しないでください。あなたの答えを編集し、コメントを削除してください。 – mickmackusa

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

答えて

関連する問題