Question

我是初学者。我正在尝试创建网页来练习 HTML 和 CSS。我将所有这些的宽度设置为 100%，但我正在水平滚动条。我尝试了很多来找到问题，但我失败了。

我的代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
    width: 100%;
    height: 89vh;
    display: grid;
    grid-template-columns: 53.7% auto;
    grid-column-gap: 2.2rem;
    border: 1px solid black; 
}
.header-1 {
    height: 100%;
    width: 100%;
    background: url(./twitter-header-2.png) no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-1 > i {
    font-size: 275px;
    color: white;
}
.header-2 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}
.header-2 i {
    font-size: 42px;
    color: #1da1f2;
    margin-bottom: 4rem;
}
.header-2-title {
    font-family: TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: bolder;
    margin-bottom: 3.2rem;
}
.header-2-subtitle {
    font-family: TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 31px;
    font-weight: bolder;
    margin-bottom: 2rem;
}
.header-2 a {
    text-decoration: none;
}
.header-2-a-1, .header-2-a-2 {
    width: 64%;
    text-align: center;
    margin-bottom: 20px;
    padding: 13px 0;
    border-radius: 30px;
    font-weight: bold;
}
.header-2-a-1 {
    background: #1da1f2;
    color: white;
}
.header-2-a-2 {
    border: 1px solid #1da1f2;
    color: #1da1f2;
    background: transparent;
}
.header-2-a-1:hover {
    background: #1a91da;
}
.header-2-a-2:hover {
    background: #e8f5fe;
}

/* ========================= Footer ========================= */

footer {
    width: 100%;
    height: auto;
    text-align: center;
    align-items: center;
    margin: 10px 0;
    border: 1px solid black;
}
footer a, footer p {
    color: #5b7083;
    font-size: 13px;
    text-decoration: none;
}
footer a {
    margin: 0 5px;
}
footer p {
    margin-top: 5px;
}
footer a:hover {
    text-decoration: underline;
}

/* ==================== Responsive ==================== */

<!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">
    <link rel="icon" href="./twitter-fav.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="./fontawesome-free-5.15.3-web/css/all.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <title>Twitter. It's whats's happening / Twitter</title>
</head>
<body>
    <!-- ========================= Header ========================= -->
    <header>
        <div class="header-1"><i class="fab fa-twitter"></i></div>
        <div class="header-2">
            <div class="header-2-contents">
                <i class="fab fa-twitter"></i>
                <p class="header-2-title">Happening now</p>
                <p class="header-2-subtitle">Join Twitter today.</p>
                <a href="#"><div class="header-2-a-1">Sign up</div></a>
                <a href="#"><div class="header-2-a-2">Log in</div></a>
            </div>
        </div>
        </div>
    </header>
    <!-- ========================= Footer ========================= -->
    <footer>
        <div class="footer-1">
            <a href="#" role="button">About</a>
            <a href="#" role="button">Help Center</a>
            <a href="#" role="button">Terms of Service</a>
            <a href="#" role="button">Privacy Policy</a>
            <a href="#" role="button">Cookie Policy</a>
            <a href="#" role="button">Ads info</a>
            <a href="#" role="button">Blog</a>
            <a href="#" role="button">Status</a>
            <a href="#" role="button">Careers</a>
            <a href="#" role="button">Brand Resources</a>
            <a href="#" role="button">Advertising</a>
            <a href="#" role="button">Marketing</a>
            <a href="#" role="button">Twitter for Business</a>
            <a href="#" role="button">Developers</a>
            <a href="#" role="button">Directory</a>
            <a href="#" role="button">Settings</a>
        </div>
        <div><p>&copy; 2021 Twitter, Inc.</p></div>
    </footer>
    <!-- ========================= JavaScript ========================= -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

如何移除滚动条？我在 inspect mode 上看到滚动条，但在普通窗口上看起来不错。

我的代码哪里有问题？我该如何解决这个问题？

Answer 1

header {
    width: 100%;
    height: 89vh;
    display: flex;      // change this part
    grid-template-columns: 53.7% auto;
    grid-column-gap: 2.2rem;
    border: 1px solid black; 
}

在这里，使用 flex 更改显示属性。

Answer 2

我已经找到了解决方案。您所要做的就是更改标题的显示属性。喜欢这个：

header {
    width: 100%;
    height: 89vh;
    display: flex;    // changed from grid
    grid-template-columns: 53.7% auto;
    grid-column-gap: 2.2rem;
    border: 1px solid black; 
}

获取水平滚动条但宽度为 100%

2 个答案: