个人中心
gpt4 book ai didi

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

转载 作者：bug小助手 更新时间：2023-10-27 21:09:29 34 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样式，这样它就不会严格占用70 px的宽度。最好使用响应单位，如vw或%。



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：hidden; }。但如果我是你，我会注意到头部比视口宽的事实。））最好使用css媒体查询，例如-将标题中的链接文本替换为图标。


更多回答

34 4 0
文章推荐： Troubleshooting ADB.exe "Device Offline" Issue(诊断ADB.exe“Device Offline”问题)
文章推荐： Read sing-box usage statistics(阅读SING-BOX使用统计数据)
文章推荐： C++20 how to deal with multi-leveled unordered_map(C++20如何处理多级无序映射)
文章推荐： How to set null in update with ef core 7 ExecuteUpdateAsync SetProperty(如何使用ef core 7 ExecuteUpdateAsync SetProperty在更新中设置NULL)
bug小助手
个人简介

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

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