0
ユーザーがページをスクロールしたときに、固定された位置を固定しているようなものがあります。相対的な親と同じサイズのCSS位置固定
スティッキーコンテナの幅を100％に設定すると、親divコンテナがオーバーフローします。ブラウザのサイズを変更しても、幅はまったく同じになるはずです。
あなたは私の問題はここで見ることができます：私はここにhttps://jsfiddle.net/d49tyfo2/2/
body {
padding: 50px;
}
#d-header {
height: 400px;
position: relative;
padding-bottom: 55px;
background-color: blue;
margin-bottom: 0px !important;
box-shadow: 2px 5px 3px 0 rgba(0,0,0,0.16);
z-index: 1;
}
.tab-container {
position: absolute;
width: 100%;
bottom: 10px;
height: 55px;
letter-spacing: 1px;
}
.tabs {
background-color: orange;
color: white;
text-transform: uppercase;
width: 26.8%;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
margin-left: 10px;
}
.date {
position: absolute;
font-size: 72px;
text-align: center;
left: 0;
right: 0;
bottom: 65px;
}
.header-sticky {
position: fixed;
top: 83px;
width: 100%;
height: 205px;
background-color: white;
box-shadow: 0 5px 4px 0 rgba(0,0,0,0.16),0 0px 0px 0 rgba(0,0,0,0.12);
border: 1px solid black;
}<body>
<div class="myHeader" id="d-header">
<div class="special-headline-wrap" style="width: 526px;">
<h1 class="special js-done">HEADLINE</h1>
</div>
<p>Aenean lacinia nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<div id="date-tab-wrapper" class="header-sticky">
<div class="date">2017</div>
<div class="tab-container">
<div class="tabs" style="margin-left: 9.1%;">Tab 1</div>
<div class="tabs">Tab 2</div>
<div class="tabs">Tab 3</div>
</div>
</div>
</div>
</body>をしないのですか？
まあ、画面上のある位置に貼り付けると、何らかの方法で他のコンテンツが常にオーバーフローします。私はあなたが達成しようとしていることを完全に理解していません。 * what *の幅は常に同じにする必要がありますか？ – mumpitz
@mumpitz 'date-tab-wrapper'（固定）の幅は 'd-header'と同じでなければなりません – Marlon
ええ、それはできません。固定位置要素は**常に**ビューポートに関連し、親幅などは無視します。恐らく 'position：sticky'がオプションになるかもしれません。それ以外の場合は、おそらくJSが必要になります。 –