如何让带有可滚动div的div不根据窗口大小滚动超过某个点？
如何让带有可滚动div的div不根据窗口大小滚动超过某个点？
提问于 2021-04-17 06:35:53
我可能会在这里描述这个问题，这对所有这些仍然是陌生的。
我有一个ID为" content“的div，里面有一个滚动条，具体取决于内容的长度。它在另一个ID为"contentArea“的div中。现在我希望contentArea的div是一个固定的大小，这样如果内容div大于contentArea的大小，我就不能让它滚动。
在我的代码中，如果浏览器窗口是完整大小或特定大小，可能看起来没什么问题，但如果窗口越小，contentArea div就可以滚动经过h1，里面有一个可滚动的潜水。所以你会得到这样的结果：
如果你在可滚动的div之外单击，你可以滚动另一个div，它就会经过我不想要的徽标区域。我只希望里面的div是可滚动的。
我真正想要的是这样的东西在我的线框图中：
因此，框中的任何内容都是可滚动的，并隐藏在徽标区域下面。这就是为什么我有两个div的原因，其中一个是可以在div中滚动的，这个div的大小是固定的。我有一个朋友看了一下，他在css中添加了一些更改，其中之一是contentArea中的高度为50%，如果您的窗口是某个大小，任何较小的窗口，并且您遇到了相同的问题，您可以滚动它通过徽标区域。
我在这里做错了什么？另外，有没有更好的方法来实现这个结果？我觉得也许我可能不需要把一个div放在另一个里面？
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: Arial;
color: #ffffff;
background-image: linear-gradient(45deg, #3a3a3a 50%, #1b1b1b 100%);
}
body::-webkit-scrollbar {
width: 0px;
}
@font-face {
font-family: Eina01Regular;
src: url(/fonts/Eina01-Regular.ttf);
font-weight: normal;
}
@font-face {
font-family: Eina01SemiBold;
src: url(/fonts/Eina01-SemiBold.ttf);
font-weight: bold;
}
@font-face {
font-family: Eina01Bold;
src: url(/fonts/Eina01-Bold.ttf);
font-weight: bolder;
}
/* Use this for image background */
/* @media (max-width: 7680px) {
body {
background: url(/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
} */
h1{
font-size: 60px;
}
#topBar {
background-color: #ffffff;
height: 61px;
top: 0;
position: sticky;
/* box-shadow: 0px 2px 15px #000000; */
}
#nav {
float: right;
margin-right: 198px;
}
#navLinks {
font-family: Eina01SemiBold;
font-size: 15pt;
color: #707070;
margin-top: 20px;
margin-bottom: 20px;
}
#navLinks li {
display: inline;
margin-right: 80px;
}
#navLinks a {
color: #707070;
text-decoration: none;
}
#navLinks a:hover {
color: #9b9b9b;
text-decoration: underline;
text-underline-offset: 2px;
}
#logoArea {
margin-top: 20px;
margin-left: 130px;
position: fixed;
}
/* Transition effects from swup */
.transition-fade {
opacity: 1;
transition: 150ms;
transform: translateX(0);
transform-origin: left;
}
html.is-animating .transition-fade {
opacity: 1;
transform: translateY(100%);
}
html.is-leaving .transition-fade {
opacity: 0;
transform: translateY(0);
}
/* End of transition effects from swup */
#contentArea {
margin-top: 200px;
margin-bottom: 130px;
margin-left: 130px;
margin-right: 130px;
position: fixed;
height: 50%;
position: relative;
}
#content {
overflow: auto;
height: 100%;
position: absolute;
}
#content::-webkit-scrollbar {
width: 5px;
}
#content::-webkit-scrollbar-track {
background: black;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
background-clip: padding-box;
}
#content::-webkit-scrollbar-thumb {
background: #000000;
}
#bottomBar {
background-color: white;
position: fixed;
height: 61px;
left: 0;
right: 0;
bottom: 0;
}
#footerContent {
margin-left: 130px;
margin-top: 20px;
position: fixed;
} <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<title>Living Dreams - Projects</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="topBar">
<div id="nav">
<ul id="navLinks">
<li><a href="/index.html">Home</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="logoArea">
<img src="/logo.png" />
</div>
<div id="swup" class="transition-fade">
<div id="contentArea">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ullamcorper lacus elit, nec dictum lacus aliquet vitae. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Morbi tincidunt diam ut purus consequat tempor. Sed
vitae nisi ut ipsum gravida scelerisque. Aliquam vitae tortor sit
amet diam facilisis euismod quis non arcu. Aenean gravida arcu mi,
at eleifend libero volutpat id. Donec imperdiet erat ac felis
tempor, sed hendrerit nunc hendrerit. Vestibulum metus felis,
bibendum nec faucibus in, fermentum nec lacus.
</p>
<br />
<p>
Vestibulum viverra, neque ut maximus sollicitudin, risus mi mattis
odio, ut luctus erat augue quis nunc. Nam quis blandit lacus.
Vivamus orci arcu, lobortis placerat mi ac, porta mattis diam.
Aliquam quis efficitur neque, in euismod ipsum. Ut dictum mattis
ante, vitae tincidunt massa interdum eu. Aenean vitae arcu ut lectus
rhoncus ornare et et erat. Suspendisse iaculis euismod ante, eget
accumsan nunc. Morbi euismod magna in euismod viverra. Phasellus
ullamcorper ipsum quis lacus cursus dictum. Quisque mollis fringilla
ultrices. Curabitur in elit odio.
</p>
<br />
<p>
Aenean vestibulum lacus et lorem faucibus, vitae pretium quam porta.
Curabitur posuere erat eu interdum consequat. Aenean at semper est.
Nullam at molestie turpis, ac luctus lorem. Etiam magna risus,
vehicula in consectetur id, sagittis id mauris. Quisque enim lorem,
ullamcorper sed maximus sit amet, suscipit eu mauris. Donec ac
tempor ligula, eget semper neque. Etiam lacinia felis at nulla
iaculis rhoncus.
</p>
<br />
<p>
Duis luctus risus eu interdum euismod. Vivamus ut nulla id ante
pulvinar condimentum. Donec facilisis leo at sollicitudin vulputate.
Suspendisse placerat, enim et congue pharetra, dolor eros ultricies
velit, vitae pellentesque justo eros ut velit. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Ut nec lorem rhoncus, ornare odio ut, egestas urna. Quisque
rutrum sit amet velit vel tristique. Aenean in condimentum diam.
Fusce vitae orci eros. Pellentesque consequat dapibus aliquam. Fusce
sit amet sapien lacus. Sed dui neque, cursus non nunc id, aliquam
condimentum ligula. Phasellus sed sagittis ex. Integer facilisis
nisi lacus, vitae fermentum lacus sagittis non.
</p>
<br />
<p>
Fusce eleifend mauris non ex convallis, ut tincidunt ligula laoreet.
Nulla tristique nisi scelerisque scelerisque pretium. Vestibulum
bibendum odio at eleifend semper. Praesent sit amet tortor
facilisis, interdum lacus ut, condimentum tellus. Nunc risus mi,
varius a interdum sit amet, facilisis quis felis. Phasellus molestie
eros tortor, ut venenatis orci molestie eget. Suspendisse potenti.
Nulla id rhoncus nisi. Curabitur pretium tincidunt ipsum at egestas.
Integer maximus diam vitae turpis viverra, ut volutpat odio
molestie. Mauris et pretium tortor. Nam sapien sem, feugiat non
lectus a, interdum faucibus eros. Quisque eget nisl ultricies, porta
eros sit amet, congue metus.
</p>
</div>
</div>
</div>
<div id="bottomBar">
<div id="footerContent">
<a href="https://www.linkedin.com/in/49030813/" target="_blank"
><img src="linkedin.png"
/></a>
<a href=""><img src="behance.png" /></a>
</div>
</div>
</body>
</html>
更新:我试着在没有contentArea div的情况下使用content div，不幸的是，这对我也不起作用。这把我卡住了。这应该放在iframe中吗？这些天来，使用iframe仍然是一件事情，还是说这只是不受欢迎的事情？我只是想以一种符合当今标准的方式来做这件事。有什么想法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-22 06:47:36
我弄明白了，不确定这是不是一个理想的方式，但对于其他对此感兴趣的人来说…
所以几乎所有的contentArea高度都是50%，所有其他的div都使用精确的像素计数来计算页边距、位置等等。将它们设置为所有百分比，而不是精确的像素值，解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67132934
复制相关文章
相似问题
腾讯云开发者
