親との固定要素

Question

コードスニペットが含まれています。ヘッダーとフッターが.main divの内側になるように配置しようとしています。

なぜこれが機能しないのかわかりません。代わりに、ビューポート全体にまたがっています。

この特定のレイアウトでは、JavaScriptなしで親の左の位置を特定することはできず、CSSでそれを保持したいと考えています。

ヘッダーとフッターは、スクロールしたときと同じ場所に留まる必要があります。

.main { 
 
    position: absolute; 
 
    left: 60px; 
 
    right: 0px; 
 
    top: 0px; 
 
    height: 50000px; 
 
    background-color: #09f; 
 
} 
 

 
.parent { 
 
    position: relative: 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #f00; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #f00; 
 
}

<div class="main"> 
 
    <div class="parent"> 
 
    <div class="header"> 
 
     <h3>header</h3> 
 
    </div> 
 
    <div class="footer"> 
 
     <h3>footer</h3> 
 
    </div> 
 
    </div> 
 
</div>

私は質問の下のコメントで書いたように、事前に任意の助けてくれてありがとう、 ジェイミー

Answer 1

は、一定の幅を親要素ではなく、ビューポートカウントされます。しかし、固定要素にleft: 60px（内容と同じ値）を設定することができます。

.main { 
 
    position: absolute; 
 
    left: 60px; 
 
    right: 0px; 
 
    top: 0px; 
 
    height: 50000px; 
 
    background-color: #09f; 
 
} 
 

 
.parent { 
 
    position: relative: 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 60px; 
 
    right: 0; 
 
    background-color: #f00; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 60px; 
 
    right: 0; 
 
    background-color: #f00; 
 
}

<div class="main"> 
 
    <div class="parent"> 
 
    <div class="header"> 
 
     <h3>header</h3> 
 
    </div> 
 
    <div class="footer"> 
 
     <h3>footer</h3> 
 
    </div> 
 
    </div> 
 
</div>