Question

我正在构建一个网页，并正在为小屏幕（max-width: 600px）布局。当屏幕变窄时，页面会出现一些水平滚动，如代码段所示，但这对我来说是意外的。我在代码中找不到比视口更宽的宽度。为什么会有那个卷轴？

/* CSS from index_default.css */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
}
h2, h3{
    margin-top: 10px;
    margin-bottom: 10px;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
header h1{
    font-family: 'Doppio One', cursive;
    color: rgb(214, 245, 210);
}
nav a{
    color: rgb(230, 245, 229);
}
#menu{
    width: 30px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: rgb(214, 245, 210);
}

/* CSS from index_small.css */

@charset "UTF-8";
body{
    width: 100vw;
    text-align: center;
}
header{
    padding-right: 10px;
    padding-left: 10px;
}
header img:first-of-type{
    width: 40px;
    margin-right: 5px;
}
header ul{
    display: none;
}
#menu{
    margin-left: 15vh;
}
#firstsection{
    background-color: rgb(220, 255, 211);
    height: 40vh;
    padding: 10% 20px 0;
    margin-bottom: 8%;
}
#firstsection div{
    margin-bottom: 30px;
}
#firstsection a{
    position: relative;
    top: 35px;
}
#middlesection{
    margin: 0 5vw;
}
#textboxes div{
    margin-bottom: 8%;
}
#lastsection img{
    width: 90%;
    margin-top: 8vh;
}
#lastsection div{
    position: relative;
    bottom: 18.5vh;
}
#lastsection div h2{
    font-size: 1.2rem;
}
footer img{
    width: 40px;
    margin-right: 8px;
}

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <title>Finances | Manage your money easily</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="finances, managing money, spending control">
        <link rel="stylesheet" type="text/css" href="index_default.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
        <link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
    </head>
    <body>
        <header>
            <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
            <a href="index.html"><h1>Finances</h1></a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
                <a href="#"><img src="Images/icons8-menu-50.png" id="menu"></a>
            </nav>
        </header>
        <main>
            <section id="firstsection">
                <div>
                    <h1>Manage your money easily, anywhere, anytime.</h1>
                    <a href="#">Get started</a>
                </div>
            </section>
            <section id="middlesection">
                <div id="textboxes">
                    <div>
                        <img src="Images/icons8-increase-64.png">
                        <h3>Concrete data</h3>
                        <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
                        <h3>Easy interface</h3>
                        <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-natural-user-interface-2-filled-50.png">
                        <h3>Fast access</h3>
                        <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
                    </div>
                </div>
            </section>
            <section id="lastsection">
                <img src="Images/board-1362851_1280.png">
                <div>
                    <h2>Register now and enjoy<br>the best of Finances.</h2>
                    <a href="#">Create an account</a>
                </div>
            </section>
        </main>
        <footer>
            <img src="Images/icons8-fund-accounting-80.png">
            <div>
                <p>A work of Bruno Sdoukos.</p>
            </div>
        </footer>
    </body> 
</html>

Answer 1

更改为CSS文件

body{
    width: 100vw;
    text-align: center;
}

到

body{
    width: 100%;
    text-align: center;
}

Answer 2

100vw的{{1}}宽度横跨整个视口宽度。如果出现 vertical 滚动条（几乎总是这样），则该滚动条会覆盖/剪切掉100vw的一小部分，因此，主体必须变得比100vw窄才能完全可见-就像“ 100vw减去垂直滚动条的宽度”。否则，将出现*水平*滚动条（如您的示例）。

为避免这种情况，您可以简单地从body中擦除 width: 100vw，这会将宽度设置为默认的body，并且可以正常工作：< / p>

auto

/* CSS from index_default.css */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
}
h2, h3{
    margin-top: 10px;
    margin-bottom: 10px;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
header h1{
    font-family: 'Doppio One', cursive;
    color: rgb(214, 245, 210);
}
nav a{
    color: rgb(230, 245, 229);
}
#menu{
    width: 30px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: rgb(214, 245, 210);
}

/* CSS from index_small.css */

@charset "UTF-8";
body{
    text-align: center;
}
header{
    padding-right: 10px;
    padding-left: 10px;
}
header img:first-of-type{
    width: 40px;
    margin-right: 5px;
}
header ul{
    display: none;
}
#menu{
    margin-left: 15vh;
}
#firstsection{
    background-color: rgb(220, 255, 211);
    height: 40vh;
    padding: 10% 20px 0;
    margin-bottom: 8%;
}
#firstsection div{
    margin-bottom: 30px;
}
#firstsection a{
    position: relative;
    top: 35px;
}
#middlesection{
    margin: 0 5vw;
}
#textboxes div{
    margin-bottom: 8%;
}
#lastsection img{
    width: 90%;
    margin-top: 8vh;
}
#lastsection div{
    position: relative;
    bottom: 18.5vh;
}
#lastsection div h2{
    font-size: 1.2rem;
}
footer img{
    width: 40px;
    margin-right: 8px;
}

Answer 3

是给width: 100vw分配的body导致了滚动。这可能是由于您可能已将页面的其他部分的左或右margin赋予了页面的其他部分或分配了宽度，使其超出了视口。现在，您可以一一检查它们并进行纠正。
或者，除了使用的样式外，您还可以为body标签采用以下任何一种样式：

摆脱width: 100vw或
添加max-width:100vw或
添加overflow-x: hidden

采用任何一种方法都可以解决您的问题。干杯！

我的页面向右滚动。为什么会发生？

3 个答案: