英文:
Website wont scroll down when window resizes?
问题
我的网站在窗口调整大小时无法滚动到页面的其他内容。这是我正在使用的CSS。当屏幕较小时，它不会让我滚动以查看更多文本。
:root {
font-size: 1.2rem;
font-family: 'Times New Roman', Times, serif;
}
html {
overflow: scroll;
}
body {
font-family: Arial, Helvetica, sans-serif;
flex-direction: row;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: gainsboro;
display: grid;
margin: 0px;
padding: 0px;
display: flex;
}
.image {
display: flex;
justify-content: center;
align-items: center;
width: 55vw;
max-width: 40vw;
background: url('signup.jpeg') no-repeat;
background-size: cover;
background-size: 55vw 100vh;
background-repeat: no-repeat;
flex-grow: 3;
}
.container2 {
margin-top: 10px;
margin-right: 100px;
overflow: scroll;
}
<!DOCTYPE html>
<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">
<title>Sign Up Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image">
<div class="header">
<h1></h1>
</div>
</div>
</body>
</html>
英文:
My website won't scroll down to the other contents of the page when the window resizes. Here is the CSS I am using. It won't let me scroll down to see my text. Ive added my CSS and html code. I'm trying to make this page but as soon as the screen is smaller it wont make me scroll down to see more of my text.
:root {
font-size: 1.2rem;
font-family: 'Times New Roman', Times, serif;
}
html {
overflow: scroll;
}
body {
font-family: Arial, Helvetica, sans-serif;
flex-direction: row;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: gainsboro;
display: grid;
margin: 0px;
padding: 0px;
display: flex;
}
.image{
display: flex;
justify-content: center;
align-items: center;
width: 55vw;
max-width: 40vw;
background: url("signup.jpeg") no-repeat;
background-size: cover;
background-size: 55vw 100vh;
background-repeat: no-repeat;
flex-grow: 3;
}
.container2{
margin-top: 10px;
margin-right: 100px;
overflow: scroll;
}
<!DOCTYPE html>
<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">
<title>Sign Up Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image">
<div class="header">
<h1></h1>
</div>
</div>
</html>
</details>
# 答案1
**得分**: 2
以下是翻译好的部分：
"that overflow:hidden in body is prevent the body from scrolling.. remove that you are good to go."
中文翻译：
"body 中的 overflow:hidden 阻止了页面的滚动。移除它，你就可以正常滚动了。"
"here is updated code snippet"
中文翻译：
"下面是更新后的代码片段"
请注意，代码部分不需要翻译，只提供翻译好的文本。
<details>
<summary>英文:</summary>
that overflow:hidden in body is prevent the body from scrolling.. remove that you are good to go.
here is updated code snippet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
font-size: 1.2rem;
font-family: 'Times New Roman', Times, serif;
}
html {
overflow: scroll;
}
body {
font-family: Arial, Helvetica, sans-serif;
flex-direction: row;
width: 100vw;
height: 100vh;
background-color: gainsboro;
display: grid;
margin: 0px;
padding: 0px;
display: flex;
}
.image{
display: flex;
justify-content: center;
align-items: center;
width: 55vw;
max-width: 40vw;
background: url("https://marketplace.canva.com/EAD2962NKnQ/2/0/1600w/canva-rainbow-gradient-pink-and-purple-virtual-background-_Tcjok-d9b4.jpg") no-repeat;
background-size: cover;
background-size: 55vw 100vh;
background-repeat: no-repeat;
flex-grow: 3;
}
.container2{
margin-top: 10px;
margin-right: 100px;
overflow: scroll;
}
<!-- language: lang-html -->
<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">
<title>Sign Up Form</title>
</head>
<body>
<div class="image">
<div class="header">
<h1>hello</h1>
</div>
</div>
</html>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论