英文:
Why is my HTML page not scrollable even though I have tried overflow-y: scrollable;
问题
我正试图创建一个测试网站，有两半 - 一半是白色的，另一半是黑色的。但是我遇到了一个问题，我无法在页面上滚动。
这可能与页面分为两半有关，但我不太确定。
以下是CSS代码：
body {
font-family: 'Roboto', sans-serif;
overflow: hidden;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
padding-top: 20px;
}
.left {
margin-left: 30px;
background-color: white;
}
.left p {
font-size: 100px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
color: 151515;
font-weight: 500;
transition: all .45s ease;
}
@media screen and (max-width: 1480px) {
.left p {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
.left p {
font-size: 80px;
}
}
@media screen and (max-width: 920px) {
.left p {
font-size: 60px;
}
}
@media screen and (max-width: 840px) {
.left p {
font-size: 40px;
}
}
.right {
right: 0;
background-color: #151515;
border-image: url(/assets/images/Frame\ 13.png) 30 round;
border-left: 5px solid transparent;
}
.logo img {
width: 250px;
}
.topnav {
overflow: hidden;
text-align: center;
z-index: 6;
}
.topnav a {
display: inline-block;
margin-right: -4px;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
z-index: 9;
transition: 300ms;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
}
.topnav a:hover {
color: var(--link-color);
}
我尝试添加以下代码：
html,
body {
overflow: scroll;
position: absolute;
}
但似乎没有起作用。能有人帮忙吗？
英文:
I am trying to make a test website with 2 halves - one half that is white and the other half that is black.
But I have encountered an issue that I can't scroll down on the page
It might have something to do with the page being split in 2 halves but I'm not quite sure.
Here is the CSS code:
body {
font-family: 'Roboto', sans-serif;
overflow: hidden;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
padding-top: 20px;
}
.left {
margin-left: 30px;
background-color: white;
}
.left p {
font-size: 100px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
color: 151515;
font-weight: 500;
transition: all .45s ease;
}
@media screen and (max-width: 1480px) {
.left p {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
.left p {
font-size: 80px;
}
}
@media screen and (max-width: 920px) {
.left p {
font-size: 60px;
}
}
@media screen and (max-width: 840px) {
.left p {
font-size: 40px;
}
}
.right {
right: 0;
background-color: #151515;
border-image: url(/assets/images/Frame\ 13.png) 30 round;
border-left: 5px solid transparent;
}
.logo img {
width: 250px;
}
.topnav {
overflow: hidden;
text-align: center;
z-index: 6;
}
.topnav a {
display: inline-block;
margin-right: -4px;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
z-index: 9;
transition: 300ms;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
}
.topnav a:hover {
color: var(--link-color);
}
I tried adding
html,
body {
overflow: scroll;
position: absolute;
}
Here is a code snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let colors = ["#47A3FF", "#77DD77", "#F9E47D", "#FF564D"], idx = 0;
document.getElementById("centered_nav").addEventListener("mouseenter", function (e) {
this.style.setProperty('--link-color', colors[(idx = idx + 1) % colors.length]);
});
<!-- language: lang-css -->
body {
font-family: 'Roboto', sans-serif;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
padding-top: 20px;
}
.left {
margin-left: 30px;
background-color: white;
}
.left h1 {
font-size: 100px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
color: 151515;
font-weight: 500;
transition: all .45s ease;
}
.left p {
font-size: 10px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
font-weight: lighter;
color: 151515;
font-weight: 500;
transition: all .45s ease;
color: #6C6C6C;
}
@media screen and (max-width: 1480px) {
.left h1 {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
.left h1 {
font-size: 80px;
}
}
@media screen and (max-width: 920px) {
.left h1 {
font-size: 60px;
}
}
@media screen and (max-width: 840px) {
.left h1 {
font-size: 40px;
}
}
.right {
right: 0;
background-color: #151515;
border-image: url(/assets/images/Frame\ 13.png) 30 round;
border-left: 5px solid transparent;
}
.logo img {
width: 250px;
}
.topnav {
overflow: hidden;
text-align: center;
z-index: 6;
}
.topnav a {
display: inline-block;
margin-right: -4px;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
z-index: 9;
transition: 300ms;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
color: white;
transition: all .45 ease;
position: relative;
}
.topnav a:after {
background: none repeat scroll 0 0 transparent;
bottom: 15px;
content: "";
display: block;
height: 1px;
left: 0%;
position: absolute;
background-color: var(--link-color);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.topnav a:hover:after {
content: "";
background-color: var(--link-color);
position: absolute;
left: 0;
bottom: 15px;
height: 1px;
width: 100%;
}
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: white;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2 {
font-size: 25px;
font-weight: bold;
text-align: center;
background: #f6df6f;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
/* Add the same box-shadow as the parent container */
}
.box1_3 h1 {
font-size: 72px;
margin-top: -10px;
}
.box1_2 p {
font-size: 18px;
}
.cards-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.right-cards-container {
display: inline-block;
flex-direction: row;
gap: 50px;
align-items: flex-end;
align-self: flex-end;
}
.right-cards-container .box1_1 {
width: 205px;
height: 215px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="split left">
<div class="logo">
<a href="index.html">
<img src="/assets/images/Logo.png" alt="logo">
</a>
</div>
<h1>How the<br>points are<br>currently<br>looking</h1>
<p>© 2023 Bharveer Singh · Sehaj Grewal</p>
</div>
<div class="split right">
<div class="topnav" id="centered_nav">
<a href="houseHistoryStanway.html" title="Home">House History</a>
<a href="#services" title="Dashboard">Dashboard</a>
</div>
<div class="cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="right-cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js" async defer></script>
</body>
</html>
<!-- end snippet -->
But that does not seem to do anything
Could someone please help me?
答案1
得分: 1
你正在使用.split元素的position: fixed。fixed元素不像静态的块级元素一样行为，因此它们不会影响元素的可滚动高度。
如果你想要一个更灵活的固定定位元素，你可能应该考虑使用position: sticky。
英文:
You're using position: fixed on the .split element. fixed elements don't behave like static block-level elements, so they don't contribute towards an element's scrollable height.
You should probably look into the use of position: sticky if you're looking for a more flexible fixed positioned element.
答案2
得分: 0
尝试使用 flex 属性：
body {
font-family: 'Roboto', sans-serif;
display: flex;
margin: 0;
}
.split {
width: 50%;
padding-top: 20px;
}
.left {
margin-left: 30px;
background-color: white;
}
.left h1 {
font-size: 100px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
color: 151515;
font-weight: 500;
transition: all .45s ease;
}
.left p {
font-size: 10px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
font-weight: lighter;
color: 151515;
font-weight: 500;
transition: all .45s ease;
color: #6C6C6C;
}
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: white;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2 {
font-size: 25px;
font-weight: bold;
text-align: center;
background: #f6df6f;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
}
.box1_3 h1 {
font-size: 72px;
margin-top: -10px;
}
.box1_2 p {
font-size: 18px;
}
.cards-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.right-cards-container {
display: inline-block;
flex-direction: row;
gap: 50px;
align-items: flex-end;
align-self: flex-end;
}
.right-cards-container .box1_1 {
width: 205px;
height: 215px;
}
英文:
Try using the flex property:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
let colors = ["#47A3FF", "#77DD77", "#F9E47D", "#FF564D"], idx = 0;
document.getElementById("centered_nav").addEventListener("mouseenter", function (e) {
this.style.setProperty('--link-color', colors[(idx = idx + 1) % colors.length]);
});
<!-- language: lang-css -->
body {
font-family: 'Roboto', sans-serif;
display: flex;
margin: 0;
}
.split {
width: 50%;
padding-top: 20px;
}
.left {
margin-left: 30px;
background-color: white;
}
.left h1 {
font-size: 100px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
color: 151515;
font-weight: 500;
transition: all .45s ease;
}
.left p {
font-size: 10px;
font-family: 'Roboto', sans-serif;
margin-top: 50px;
font-weight: lighter;
color: 151515;
font-weight: 500;
transition: all .45s ease;
color: #6C6C6C;
}
@media screen and (max-width: 1480px) {
.left h1 {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
.left h1 {
font-size: 80px;
}
}
@media screen and (max-width: 920px) {
.left h1 {
font-size: 60px;
}
}
@media screen and (max-width: 840px) {
.left h1 {
font-size: 40px;
}
}
.right {
right: 0;
background-color: #151515;
border-image: url(/assets/images/Frame\ 13.png) 30 round;
border-left: 5px solid transparent;
}
.logo img {
width: 250px;
}
.topnav {
overflow: hidden;
text-align: center;
z-index: 6;
}
.topnav a {
display: inline-block;
margin-right: -4px;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
z-index: 9;
transition: 300ms;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
color: white;
transition: all .45 ease;
position: relative;
}
.topnav a:after {
background: none repeat scroll 0 0 transparent;
bottom: 15px;
content: "";
display: block;
height: 1px;
left: 0%;
position: absolute;
background-color: var(--link-color);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.topnav a:hover:after {
content: "";
background-color: var(--link-color);
position: absolute;
left: 0;
bottom: 15px;
height: 1px;
width: 100%;
}
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: white;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2 {
font-size: 25px;
font-weight: bold;
text-align: center;
background: #f6df6f;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
/* Add the same box-shadow as the parent container */
}
.box1_3 h1 {
font-size: 72px;
margin-top: -10px;
}
.box1_2 p {
font-size: 18px;
}
.cards-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
margin-top: 50px;
}
.right-cards-container {
display: inline-block;
flex-direction: row;
gap: 50px;
align-items: flex-end;
align-self: flex-end;
}
.right-cards-container .box1_1 {
width: 205px;
height: 215px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="split left">
<div class="logo">
<a href="index.html">
<img src="/assets/images/Logo.png" alt="logo">
</a>
</div>
<h1>How the<br>points are<br>currently<br>looking</h1>
<p>© 2023 Bharveer Singh · Sehaj Grewal</p>
</div>
<div class="split right">
<div class="topnav" id="centered_nav">
<a href="houseHistoryStanway.html" title="Home">House History</a>
<a href="#services" title="Dashboard">Dashboard</a>
</div>
<div class="cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="right-cards-container">
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<h1>1</h1>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js" async defer></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论