全幅ヘッダーときオーバーフローコンテンツ（ボディ）

htmlコード：全幅ヘッダーときオーバーフローコンテンツ（ボディ）

<body> 
    <header style="background-color:green;">header</header> 
    <main> 
     <p>some content</p> 
     <div style="width:2000px">some wide content, makes overflow body</div> 
     <p>some content</p> 
    </main> 
    <footer>footer</footer> 
</body>

体中の一部のコンテンツがウィンドウよりも広くなっている

はその後、垂直スクロールが表示されます - これは私が持っていたいものです。ヘッダーとフッターの幅はウィンドウの100％です。

ヘッダー/フッターの幅をコンテンツの幅に広げたいとします。または（さらに良い解決策）ヘッダー/フッターは幅100％で留まりますが、垂直スクロール（ウィンドウ上）が表示されますが、垂直スクロールを開始すると、本文のみがスクロールします。フッター/ヘッダーは「固定」します。水平方向にスクロールしているときにヘッダー/フッターがコンテンツで「移動」する必要があるため、position：fixedを使用できません。

出典

2017-07-12 massther

私はなく、かなりやります理解すると、その位置が固定された要素は動くだろう垂直方向または水平方向にスクロールするときのコンテンツ。質問のあるコードスニペットを投稿して、何を意味するのかを実証し、メッセージを少しはっきりと伝えることができます。 – UncaughtTypeError

body { 
 
    /* Take width and height of content and use flexbox layout */ 
 
    /* By default all flex items will stretch for cross axis */ 
 
    display: inline-flex; 
 
    /* Align all blocks in columns */ 
 
    /* All items will stretch in width */ 
 
    flex-direction: column; 
 
    /* Minimum occupy 100% of screen width */ 
 
    min-width: 100vw; 
 
    /* Minimum occupy 100% of screen height */ 
 
    /* To get rid of horizontal scrollbar can be changed to smaller value */ 
 
    /* e.g. min-height: calc(100vh - 20px) */ 
 
    /* Replace min-height with height to also work in IE */ 
 
    min-height: 100vh; 
 
    margin: 0; 
 
} 
 

 
.content { 
 
/* Emulating long content */ 
 
    width: 9999px; 
 
    /* Take all height */ 
 
    flex: 1 0 auto; 
 
} 
 

 
/* Styles just for demo */ 
 
header { 
 
    background-color: yellow; 
 
} 
 

 
.content { 
 
    background-color: orange; 
 
} 
 

 
footer { 
 
    background-color: lime; 
 
}

<header>Header</header> 
 
<div class="content">Very long content</div> 
 
<footer>Footer</footer>

あなたはheaderと水平方向のみのために固定footerを作るために必要がある場合はJavaScriptでこれを達成することができます

var header = document.querySelector("header"); 
 
var footer = document.querySelector("footer"); 
 

 
window.addEventListener("scroll", function(e) { 
 
    var rect = document.body.getBoundingClientRect(); 
 
    header.style.marginLeft = -rect.left + "px"; 
 
    footer.style.marginLeft = -rect.left + "px"; 
 
});

body { 
 
    /* Take width and height of content and use flexbox layout */ 
 
    /* By default all flex items will stretch for cross axis */ 
 
    display: inline-flex; 
 
    /* Align all blocks in columns */ 
 
    /* All items will stretch in width */ 
 
    flex-direction: column; 
 
    /* Minimum occupy 100% of screen width */ 
 
    min-width: 100vw; 
 
    /* Minimum occupy 100% of screen height */ 
 
    /* To get rid of horizontal scrollbar can be changed to smaller value */ 
 
    /* e.g. min-height: calc(100vh - 20px) */ 
 
    /* Replace min-height with height to also work in IE */ 
 
    min-height: 100vh; 
 
    margin: 0; 
 
} 
 

 
.content { 
 
    /* Emulating long content */ 
 
    width: 9999px; 
 
    height: 1000px; 
 
    /* Take all height */ 
 
    flex: 1 0 auto; 
 
} 
 

 

 
/* Styles just for demo */ 
 

 
header { 
 
    background-color: yellow; 
 
} 
 

 
.content { 
 
    background-color: orange; 
 
} 
 

 
footer { 
 
    background-color: lime; 
 
}

<header>Header</header> 
 
<div class="content">Very long content</div> 
 
<footer>Footer</footer>

出典

2017-07-12 11:38:34

縦スクロール中にヘッダー/フッターを左端に貼り付けるにはどうすればよいですか？ – massther

JavaScriptのみ。私が理解している限り、水平方向と垂直方向のスクロールはウィンドウの上にとどまるべきです。 –

はい、それは正しいです – massther

全幅ヘッダーときオーバーフローコンテンツ（ボディ）

答えて

関連する問題