css 当窗口调整大小时，网站不会向下滚动？

wj8zmpe1 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(150)

当窗口调整大小时，我的网站不会向下滚动到页面的其他内容。这是我使用的CSS。它不让我向下滚动查看我的文本。我添加了我的CSS和HTML代码。我试图使这个页面，但只要屏幕较小，它不会让我向下滚动，看到更多的我的文字。

: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>

css

来源：https://stackoverflow.com/questions/76584471/website-wont-scroll-down-when-window-resizes

1条答案

按热度按时间

vq8itlhq1#

that overflow：隐藏在body中是防止body滚动的。.删除你是好去。
下面是更新代码片段

: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;
}

<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>

赞(0）回复(0）举报 2023-07-01

我来回答

css 当窗口调整大小时，网站不会向下滚动？

1条答案

相关问题

热门标签

最新问答