headerを固定し、コンテンツと重ならないようにしたい

＊やりたいこと
画面を大きく固定ヘッダとコンテンツの２つに分け、ヘッダはつねに固定したい
コンテンツは縦方向、横方向にスクロールしてもヘッダは固定されており、コンテンツは
縦方向にスクロールしてもヘッダの下をくぐらないようにしたい。（コンテンツのみスクロールするようにしたい。）

また可能なら、横方向にスクロールしてもヘッダ位置は変わらないようにしたい（画面左上に固定）

＊やってみたこと　以下のとおり
ヘッダの固定はできたが、ヘッダ下部のコンテンツ部分を縦方向似スクロールすると、ヘッダをくぐってしまう（コンテンツのみスクロールできない）のが問題

html
1 <html>
2  <head></head>
3 <body>
4   <div id="header-fixed">
5     <div id="header-bk">
6      <div id="header">・・・</div>
7     </div>
8   </div>
9   <!-- コンテンツ -->
10     <div id="body-bk">
11       <div id="body" style="height:1000px;padding-top:140px">contents start<br>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ・・・<br></div>
12    </div>
13   <!-- // コンテンツ -->
14   <div id="footer-fixed">
15     <div id="footer-bk">
16       <div id="footer">・・・</div>
17     </div>
18   </div>
19 </body>
20 </html>
21 <style>
22html, body{
23    margin: 0;         
24    padding: 0;        
25    width:100%;
26    height:100%;
27}
28div#header-fixed
29{
30    position: fixed;   
31    top: 0px;          
32    left: 0px;         
33    width: 100%;       
34    height: 140px;     
35}
36 
37 
38div#header-bk { 
39	background-color:#444;    
40	padding:10px 0 20px;      
41	height:110px;             
42	width:100%;               
43}
44 div#header { 
45	border: 5px solid #fff;    
46	height: 100%;              
47	width: 960px;              
48	margin: auto;              
49 }
50 
51 </style>
52

よろしくお願いします

キャプチャ添付　くぐっている状態

m.ts10806

2020/05/27 19:05

固定にしたら潜るのは当然かと思いますが（teratail然り）、具体的にどうしたいのでしょう。コンテンツ部分だけ別途スクロールにするとかですか？

sakura-shi

2020/05/28 00:22 編集

固定にしたら潜るのは当然かと思いますが（teratail然り）、具体的にどうしたいのでしょう。コンテンツ部分だけ別途スクロールにするとかですか？ーーーー＞　そうです。くぐらないようにしたいのです。　　　　　　重ならないようにしたい。　　　　　　コンテンツの高さは固定ではなく可変。　　　　　　できないことなのでしょうか？

kei344

2020/05/28 00:35

「くぐらないように」がわかりません。具体的にくぐっていなくてスクロールできているサイトのURLや、くぐったときに何が問題になっているかを追記してください。

Lhankor_Mhy

2020/05/28 03:08

「コンテンツの高さは固定ではなく可変」とのことですが、コンテンツ高さを可変にしてコンテンツ部分だけ別途スクロールにする、というイメージがわきません。コンテンツ高さが可変であれば、コンテンツに合わせて高さが伸びるので、コンテンツ部分にスクロールは必要ないですよね？

mari.rinn

2020/05/28 06:56

sakura-shiさんの言う、くぐってる　重なっている　という状態をスクショして貼って頂けるとわかりやすいかもです。

sakura-shi

2020/05/28 09:44

キャプチャを添付しました下方にスクロールするとヘッダにコンテンツが隠れてしまうのです。これを解決したいです。コンテンツのみでスクロールできないのでしょうか？ iframeは使用したくないです

mari.rinn

2020/05/28 10:19

>コンテンツのみでスクロールできないのでしょうか？コンテンツのみがスクロールしているからこそ貼って頂いた画像のようになる訳で、コンテンツの頭部分も出た状態にしたいなら、headerの固定を外すしかないのでは？ぎゃくに、なんの為にheaderをそこに固定させてるのか？って話になると思うんですけども。コンテンツの頭を隠したくないのなら、headerに入れる要素は、上ではなく、右か左かに固定するとかはダメなんですか？

sakura-shi

2020/05/28 12:12

ありがとうございます。

行動規範の内容に同意します

回答2件

自己解決

多くのかたに返答いただきましたが、質問自体をみなおしたほうがよさそうなので解決とします。

投稿2020/05/28 12:14

sakura-shi

総合スコア93

こういうことですか？
「コンテンツの高さは可変」という条件は何かの行き違いでしょうから、とりあえず除外しました。
サンプル

css
1div#header-fixed
2{
3    /* position: fixed; 削除*/
4    top: 0px;          
5    left: 0px;         
6    width: max-content;       
7    height: 140px;     
8}
9
10
11#body-bk{
12    height: calc( 100vh - 140px );
13    overflow: scroll;
14}