个人中心
gpt4 book ai didi

How to make it so there isnt a horizontal scroll bar when viewport gets too small(如何使其在视区变得太小时不会出现水平滚动条)

转载 作者：bug小助手 更新时间：2023-10-27 20:04:33 33 4
gpt4 key购买 nike



I'm trying to have my web page not have a horizontal scroll bar when the browser is adjusted. Currently my main page creates a horizontal bar when it becomes to small. This doesn't happen on any of my other pages which makes me think its the body of the main mage where this is occurring not in my nav bar or footer because I use the same nav bar and footer on my other pages and they scale without a horizontal bar.

我试着让我的网页在浏览器调整时没有水平滚动条。目前，我的主页在变小时会创建一个水平条。这不会发生在我的任何其他页面上，这让我认为这发生在主法师的主体上，而不是在我的导航栏或页脚中，因为我在其他页面上使用相同的导航栏和页脚，并且它们没有水平条的缩放。




.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}
.topnav{
    width: 100%;
    height: calc(100vh / 10);
    background-color: #2B78E4;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
}
.topnav a{
    text-decoration: none;
    color: black;
    font-family: "Helvetica", sans-serif;
}
.helmet-logo {
    width: 70px;
    height: 70px;
}
.dropbtn {
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
.dropdown {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    font-style: inherit;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #f6f6f6;
}
.nav-btn{
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;


}
#login-btn{
    position: relative;
    display: inline-block;
    margin-left: auto;
}
#signUp-btn{
    position: relative;
    display: inline-block;
    float: right;
    padding-left: 20px;
}
#login-btn, #signUp-btn {
    float: right;
}
#nav-teams{
    position: relative;
    padding-left: 20px;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", sans-serif;
    background-color: #666666;
}
footer {
    background-color: #999999;
    background-size: 50px;
    height : calc(100vh/8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
.footer-links {
    /* Set the display property to flex */
    display: flex;
    /* Align the links vertically */
    align-items: center;
}
.footer-links a {
    /* Set the color of the links */
    color: black;
    /* Add some margin to the right of the links */
    margin-left: 20px;
}
.main-home{
    background-color: #3030F1;
    background-image: url("images/field-banner.jpg");
    background-position: center;
    background-size: cover;
    margin: 0;
    padding-top: 300px;
    padding-bottom: 300px;
    text-align: center;
    box-sizing: border-box;
}

.main-home #main-title{
    background-color: #dddddd;
    margin: 0;
    display: inline-block;
    align-content: center;
    font-size: 72px;

}
@media (max-width: 768px) {
    .main-home #main-title {
        font-size: 36px; /* Adjust the font size for smaller screens */
    }
}
.main-home #sub-title{
    background-color: #dddddd;
    display: inline-block;
    align-content: center;
}
.main-home .main-btns a{
    text-decoration: none;
    color: black;
    padding: 70px 40px 70px  40px;
    font-size: 18px;
}
.main-body-btn{
    min-width: 150px;
    height: 5%;
    display: inherit;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>College Football Archive</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<header>
    <div class="topnav" id="myTopnav">
        <a href = homepage.html>
            <img src="images/fb-helmet.png" alt="Logo" class = "helmet-logo">
        </a>

            <div class="teams-btn" id="nav-teams">
           <button class="nav-btn" ><a href="Teams.html">Teams</a></button>
        </div>

        <div class="dropdown">
            <button class="dropbtn">Seasons
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="Seasons.html">2022</a>
                <a href="www.collegefbarchive.com/seasons/2021">2021</a>
                <a href="www.collegefbarchive.com/seasons/2020">2020</a>
            </div>
        </div>

        <div id="login-btn">
            <button class = "nav-btn" ><a href="SignIn.html">Log In</a></button>
        </div>

        <div id="signUp-btn">
        <button class="nav-btn" ><a href ="Signup.html">Sign Up</a></button>
        </div>
    </div>
</header>
<body>

<div class = "main-home">
    <h1 class = "titles" id = "main-title">College Football Archive</h1>
    <div>
    <h2 class = "titles" id = "sub-title"> The place for College Football Scores</h2>
    </div>
    <div class = "main-btns">
        <span>
            <button class="main-body-btn" id="main-teams-btn" href="Teams.html">
                <a  href="Teams.html" >Teams</a>
            </button>
            <button class="main-body-btn"  id="main-seasons-btn" href="Seasons.html">
                <a href="Seasons.html" >Seasons</a>
            </button>
        </span>
    </div>
</div>

<script src="" async defer></script>
</body>
<footer>
    <div class="footer-logo">
        <a href = homepage.html>
        <img src="images/fb-helmet.png" alt="Logo" class="helmet-logo">
        </a>
    </div>
    <div class="footer-links">
        <a href="Contact.html">Contact Us</a>
        <a href="Terms%20of%20Use.html">Terms of Use</a>
    </div>
</footer>

</html>




更多回答

I've edited your question so that your code is now a snippet that can be run directly from your question. When I run that code I'm not seeing a horizontal scrollbar

我已经编辑了您的问题，现在您的代码是可以直接从您的问题运行的代码片段。当我运行该代码时，我没有看到水平滚动条

优秀答案推荐

Since we don't have access to your image folder, we can't see a horizontal scroll bar. But my suggestion is to edit your .helmet-log class CSS styles so that it is not rigidly taking up the width of 70px. It is better to use responsive units; such as vw or %.

由于我们无法访问您的图像文件夹，因此看不到水平滚动条。但我的建议是编辑您的.helmet-log类的css样式，这样它就不会死板地占用70px的宽度。最好使用反应灵敏的部件，如大众或%。



Your header is wider than the viewport, so there's a scrollbar.

If your main goal is to have no horizontal scrollbar, then you can just set body { overflow-x: hidden; }.

But if I were you, I would pay attention to the fact that the header is wider than the viewport. ))

It is best to use css media query, for example - replace links text in header to icons.

标题比视区宽，所以有一个滚动条。如果您的主要目标是没有水平滚动条，则只需设置Body{overflow-x：idden；}即可。但如果我是你，我会注意到标题比视区宽的事实。))最好使用css媒体查询，例如，将标题中的链接文本替换为图标。


更多回答

33 4 0
文章推荐： isar_generator build failing due to switch statements(由于SWITCH语句，ISAR_GENERATOR生成失败)
文章推荐： Error setwd() "cannot change working directory" [closed](错误setwd()“无法更改工作目录”[已关闭])
文章推荐： awk for loop how to see if one line exists in another file and compare dates lines of both files [closed](AWK for循环如何查看另一个文件中是否存在一行并比较两个文件的日期行[已关闭])
文章推荐： Snowflake UDF Unsupported subquery type cannot be evaluated(无法评估Snowflake UDF不支持的子查询类型)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com