我无法让页眉和页脚位于页面上的固定位置

Question

我的页眉（当我打开页面时）在我的内容的中间，而不是在页面的顶部，我的页脚无处可寻。 :(

（是的，我试过滚动到页面底部……什么都没有。但是页眉随我移动……在错误的位置。我还尝试添加一些填充。什么都没有。只是把它弄得更乱了.)

这是我的 css:

body {
  background-image: url("background.jpg");
  background-color: #FFD500;
  background-attachment: fixed;
  margin-top: 100px;
}
header {
  background: rgba(255, 0, 0, 0.2);
  position: fixed;
  border:1px solid orange;
  width: 98.45%;
}
footer {
  background: rgba(255, 0, 0, 0.2);
  position: fixed;
  border:1px solid orange;
  width:98.45%;
}

希望这个问题能得到解决，因为网上没有其他任何东西能为我工作！

谢谢！

Answer 1

我在这里快速做了一些事情，这是你要找的吗？

.navbar{
  margin-top: -10px;
  z-index: 1;
  height: 44px;
  position:fixed;
  width: 100%;
  background: blue;
  margin-bottom: 20%;
  }
.stuff{
  padding-top: 40px;
  padding-bottom: 40px;
  position: inherit;
  height: auto;
  width:100%;
  }
.footer {
    width: 640px;
    margin: 0% -320px;
    height:44px;
    position: fixed;
    left: 50%;
    bottom: 0%;
    background: red;
}

<div class = "navbar"></div>
  <div class = "stuff">
<p>Hoodie salvia health goth, lumbersexual Bushwick leggings Tumblr viral 3 wolf moon tofu raw denim fanny pack Portland. Viral PBR hella, semiotics church-key ennui before they sold out Marfa irony migas ugh gentrify typewriter. Photo booth VHS actually, Schlitz gastropub Etsy butcher try-hard church-key. Wolf Portland wayfarers Echo Park jean shorts pickled. Banh mi paleo hella Marfa. Truffaut lumbersexual kitsch, chillwave +1 Carles Neutra McSweeney's leggings. Asymmetrical artisan typewriter polaroid cornhole listicle shabby chic ethical, single-origin coffee Portland.

Deep v asymmetrical cray +1, Intelligentsia Bushwick cornhole. Mlkshk Godard single-origin coffee you probably haven't heard of them bicycle rights. Cronut actually cred cold-pressed photo booth locavore, banjo Truffaut farm-to-table meditation beard. Keytar Schlitz occupy, polaroid messenger bag Austin 3 wolf moon cornhole Echo Park pour-over Shoreditch. Authentic whatever cred Bushwick. Meggings health goth Tumblr mustache street art. Distillery next level food truck literally bitters church-key, typewriter asymmetrical Vice Kickstarter umami sartorial gastropub.</p>
  </div>
<div class = "footer"></div>

我无法让页眉和页脚位于页面上的固定位置

I can't get my header & footer to be in a fixed position on the page

html

css

header

css-position

footer