0

こんにちは、私はウェブページをデザインしています。固定ヘッダーが必要です。

このために私は設定しposition: fixed;ました。しかし、Webページに葯<div>を追加して上部マージンを設定すると、ヘッダーのマージンも変更されます。これは、ヘッダーのCSSです

#header {
  width:100%;
  height:35%;
  color:#303030;
  postion:fixed;
}

ヘッダーの下のdivのCSSはこれです

#content {
  width:250px;
  height:350px;
  margin-left:50px;
  margin-top:75px;
  border-style:solid;
  border-color:#303030;
  border-width:1px;
}

私のhtml

<div id="header">
Predufu
</div>
<div id="content">
</div>

この質問にhtmlの一部を追加します

今#content私は設定margin-top: 75px;しましたが、これでヘッダーの余白も変更されましたなぜそれが起こったのか教えてください私のウェブページに固定ヘッダーが必要です

4

2 に答える 2

0

CSS属性のいくつかを変更したところ、うまくいきました。最初に position: absolute で試しましたが、 position: fixed でも機能します。

#header {
    position: absolute;
    top: 10px;
    left: 10px;
    width:100%;
    height: 100px;
    color:#303030;
    background-color: #aaa;
}

#content {
    position: absolute;
    top: 120px;
    left: 50px;
    background-color: #eee;
    width:250px;
    height:350px;
    border: 1px solid 303030;
}

ここで位置を参照してください: 修正済み --> http://jsfiddle.net/NicHope/n32Mu/ これはあなたが探しているものですか?

于 2013-08-30T11:04:23.470 に答える