我正在尝试，但我没有想出解决这个相当简单问题的方法。
基本上我想要的是拥有一个固定的主体，其中有一个垂直和水平居中的矩形div来托管我的内容。身体不会滚动，但div的内容应该。
换句话说，我想要的是基本上有一个完整的页面，在较低层的整个背景（例如，全宽度图像）和在我的背景层之上托管我的内容的div，独立滚动。
我的代码中基本上有三个嵌套层：
1）正文（溢出：隐藏），2）全宽透明容器（overflow-y：scroll）和3）应该托管我所有内容的居中div（位置：绝对）。
问题是，没有什么是滚动。如果我尝试向中心div添加overflow-y：scroll或auto，则会在其上显示一个丑陋的滚动条，这不是我想要的 - 我想使用“main”主体滚动条进行滚动。
html, body {
margin: 0;
background-color: lightgray;
overflow: hidden;
}
.container {
overflow-y: scroll;
width: 100%;
height: 100vh;
background-color: red;
}
.overlay {
position: absolute;
width: 90%;
height: 90vh;
background-color: lightgrey;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
z-index: 10;
}<section class="container">
<div class="overlay">
<h1>Lorem Ipsum </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
</p>
</div>
</section>
这里有一个小提琴，你可以看到我想要的东西：
https://jsfiddle.net/ohmlg/29mL6tnv/
我想要的是什么：
1）当我滚动时，div的内容留在div中（现在，溢出：身体上的隐藏属性正在切断部分内容） 2）使用主滚动条滚动div中的内容
我无法实现一种解决方法，比如在右下角和左上方有四个厚div（基本上在中间留下一个矩形的“窗口”），因为我想要有两个背景：一个在底层（body或。容器）和“内容div”上的一个。
答案 0 :(得分：2)
这不是直接可行的，但可以通过覆盖某些部分来使看起来 ...
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 10vh 10vw;
}
body, .bg {
background-color: #ddd;
background-image: url('https://lorempixel.com/638/220/abstract/');
background-attachment: fixed;
background-position: center;
background-size: cover;
}
h1 {
margin: 0 0 1rem;
}
p {
margin: 1rem 0;
}
p:last-child {
margin-bottom: 0;
}
#padding-top {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100vw;
height: 10vh;
}
#padding-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
}
#content-outline {
position: fixed;
top: 10vh;
right: 10vw;
bottom: 10vh;
left: 10vw;
border: 1px solid #000;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
#content {
padding: 1rem;
background-color: rgba(255, 255, 255, 0.5);
}<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales nunc eu est semper eleifend. Sed vulputate nulla sit amet hendrerit finibus. Donec dapibus turpis eget mauris ultricies lobortis. Curabitur in est a felis lacinia facilisis eu quis tortor. Quisque eget augue luctus, tristique ligula fermentum, efficitur sapien. Aenean ut nisi risus. Sed libero ligula, venenatis vel dictum nec, suscipit a nisl. Maecenas a lacus et urna commodo aliquam. Quisque gravida maximus ipsum nec interdum. Donec nec aliquet mauris. Phasellus laoreet sit amet erat at ornare. Donec rutrum nulla libero, eget sollicitudin ligula convallis dapibus. Donec sodales, lorem lacinia rutrum tempus, mi nunc ultricies justo, non dignissim turpis diam id urna. In suscipit gravida elit quis tristique. Vivamus quis sapien vestibulum, elementum mi in, sodales quam. Donec enim elit, lacinia vitae urna a, tincidunt sagittis nunc.</p>
<p>Nullam pretium, libero non viverra suscipit, mauris elit egestas odio, eget commodo purus ipsum vel purus. Morbi eleifend libero mauris, feugiat bibendum ante pretium id. Morbi fringilla fringilla convallis. Nulla ullamcorper dui et quam pellentesque, ut finibus dolor sodales. Donec laoreet, augue ac ornare pretium, nulla est imperdiet elit, non euismod urna mi a risus. Proin id commodo neque. Aliquam scelerisque imperdiet elementum. Phasellus dignissim rhoncus nibh, sed efficitur massa aliquam id. Curabitur sit amet turpis dictum, pellentesque leo sed, congue urna. Morbi maximus volutpat neque, vitae molestie urna ornare a. Suspendisse ut tincidunt urna.</p>
<p>Proin eget nisl at lacus placerat aliquam. Curabitur tempus consectetur nulla eu malesuada. Nulla at tortor quis erat ornare ultricies. Aenean dolor erat, tempor in risus vel, fringilla sollicitudin risus. Quisque porttitor metus eget ante ullamcorper faucibus. Curabitur placerat turpis ac aliquet rhoncus. Aenean fringilla fringilla urna, a consectetur tellus aliquet non. Sed dapibus, ex vitae lacinia sodales, ex nisl pulvinar nulla, et tempus nulla tortor at tellus. Vivamus ac consequat eros. Fusce ullamcorper leo sed malesuada tincidunt. Integer ullamcorper blandit eros in scelerisque.</p>
<p>Nunc fermentum sapien orci, id feugiat lectus aliquet gravida. Sed imperdiet posuere nulla, sed aliquam est mollis at. Donec faucibus justo at velit tincidunt elementum. Quisque eget maximus nunc, eget pulvinar mi. Donec venenatis diam erat, non porttitor sem tempus ut. Donec dictum odio sed ornare pulvinar. Aliquam ac nulla velit. Ut nec magna ut nulla ornare imperdiet id ut ante. Aliquam placerat laoreet pharetra. Donec ante purus, maximus ac nisi ullamcorper, egestas vestibulum diam. In ultricies ante a nibh vestibulum, ut gravida nulla pulvinar.</p>
<p>Suspendisse purus ex, tempus a accumsan ac, gravida eu quam. Proin venenatis est quis laoreet congue. Fusce nec efficitur dolor. Vestibulum eleifend felis non ultrices pretium. Mauris auctor eget risus non luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce varius non lacus non porttitor. Integer a turpis at lacus consequat sollicitudin. Vestibulum eget mi at enim imperdiet hendrerit ut ut nibh. Aliquam placerat sodales finibus. Nulla porttitor dolor sed nisi tincidunt vehicula a sit amet ligula. Aenean turpis ex, tempor sed urna et, tristique pretium velit. Mauris est risus, porta id dui a, tristique hendrerit odio. Sed ultricies consectetur gravida. Aenean vestibulum elit venenatis, condimentum sapien at, consectetur augue.</p>
</div>
<div id="padding-top" class="bg"></div>
<div id="padding-bottom" class="bg"></div>
<div id="content-outline"></div>
答案 1 :(得分：1)
您需要将相同的overflow属性添加到overlay元素
.overlay {
overflow-y: scroll;
}
根据你想要的东西，你真的不需要容器上的溢出，你只需要它就会溢出的元素的父元素，在这种情况下p
答案 2 :(得分：0)
如果您想尝试实现类似的功能，可以使用固定页眉和页脚来实现。
#header {
background-color:red;
width:100vw;
height:20px;
position:fixed;
top:0;
}
#footer {
background-color:red;
width:100vw;
height:20px;
position:fixed;
bottom:0;
}