html - CSS 拉伸(stretch) div 使其在屏幕上拉伸(stretch)

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 中引用的一些元素与 HTML 应用程序略微无关。谢谢!

Answer 1

这是修复导航部分，内容部分在下面有不同的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>