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


更多回答

26 4 0
文章推荐： prohibit :update in cancan conflicting with :edit(禁止：Cancan中的更新与：编辑冲突)
文章推荐： PostgreSQL Auto-Increment Behavior After Server Restart in Spring Boot(Spring Boot中服务器重启后的PostgreSQL自动增量行为)
文章推荐： Why the Led stay at on position, instead of blink?(为什么LED保持在开的位置，而不是闪烁？)
文章推荐： navigate textview of gridview with arrows android(用箭头导航网格视图的文本视图)
bug小助手
个人简介

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

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