1
このレイアウトが機能するようにしようとしています。中間セクションのコンテンツが上部（ヘッダー）パネルに到達するとクリップされます。スクロールページでdivをクリップする方法は？
ページに背景イメージを配置したいので、上部パネルに背景色を塗り潰す（コンテンツを非表示にしたくありません）。私はそれがiframe（醜い）のように見えるので、コンテンツのdivだけでなく、ページ全体のスクロールバーが必要です。
コードは以下のとおりです。ページをスクロールすると、テキストがトップパネルに表示されます。私はそれが上のパネルに当たったときにクリッピング/マスクされることを望む。
/* Reset body padding and margins */
body {
margin: 0;
padding: 0;
}
/* Make Header Sticky */
#header_container {
border: 1px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 940px;
}
#content {}
/* Make Footer Sticky */
#footer_container {
background: #eee;
border: 1px solid #666;
bottom: 0;
height: 60px;
left: 0;
position: fixed;
width: 100%;
}
#footer {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}<body>
<html>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et
mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat
mi metus, a gravida quam.
<br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus
nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae
diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
<br /><br /> Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique
in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
<br /><br /> Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae
metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam
at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
<br /><br /> Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus
semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in
lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero
venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
<br /><br /> Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget,
vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam.
Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
<br /><br /> Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque
lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl
id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
<br /><br /> Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque
euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus
quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
<br /><br /> Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus.
Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
<br /><br /> Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum
ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi
mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
フィドラーリンクの代わりにスニペットを試してください。あなたはここにコードを見ることができます！ –
@Prashanth Bennyごめんなさい、これは初めてです。スニペットはどのようにすればよいですか？ – Dan
私はあなたのためにそれをやった！編集を承認できる場合 –