个人中心
gpt4 book ai didi

html - 为容器设置自动高度时，它会将页面移到上方

转载 作者：行者123 更新时间：2023-11-28 14:43:50 25 4
gpt4 key购买 nike

差不多，我有一个容器，里面有两个 div。我将每个 div 设置为 float 到不同的边。一个在左边，一个在右边，现在我遇到的问题是，由于我必须手动设置高度，它会将页面从原始位置移动 10 个像素。所以当我加载不同的页面时，它没有垂直排列。这是它的 .gif，这是我的代码。这个网站是为我的网页设计课准备的。谢谢

https://imgur.com/a/h9dW7ib

index.html(移过来的页面)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/stylesheet.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <div class="container">
            <div class="banner">
                <img src="images/banner.png">
            </div>
            <div class="navbar">
                <a href="index.html" class="active">Home</a>
                <a href="news.html">News</a>
                <div class="dropdown">
                    <button class="dropbtn">Parts 
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="cases.html">Cases</a>
                        <a href="motherboards.html">Motherboards</a>
                        <a href="processors.html">Processors</a>
                        <a href="graphics.html">Graphics Cards</a>
                        <a href="storage.html">Storage</a>
                        <a href="powersupplies.html">Power Supplies</a>
                        <a href="ram.html">RAM</a>
                        <a href="other.html">Other</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">Builds 
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                    </div>
                </div> 
                <div class="contact" id="navright">
                    <a href="contact.html" style="float:right;">Contact</a>
                </div>
            </div>
            <div class="featured">
                <div id="product_left">
                    <img src="images/featured.gif" id="featured_gif">
                </div>
                <div id="product_right">
                    awdaw
                </div>
            </div>
            <div class="welcome">
                <h1 class="welcome_header">Welcome</h1>
                <p class="welcome_text">Here at Terry's Computers we are determined to make our customers experience as 
                    stress free as possible.  We will help every customer find the best deal possible
                    for their budget.  Here we have computer parts such as motherboards, processors, and
                    more to offer.  We also offer prebuilt computers that range from productivity, gaming,
                    or whatever the customer desires.  We also take custom requests that can more suit our customers.  
                    We can help you find the perfect computer that will satisfy your needs.  If you have any
                    questions or suggestions head over to the <a href="contact.html">Contact</a> page and send us an email.</p>
            </div>
            <div class="footer">
                <p class="footer_text">Yeet</p>
            </div>
        </div>
    </body>
</html>

样式表.css

/*
Color Scheme
http://paletton.com/#uid=14x0u0k++k3ZJvC+Wpu+Zer+W78
*/
body{
    background-color: #25004E;
    margin: 0;
}
.container{
    width: 960px;
    margin: 15px auto;
}
.banner{
    margin-top: 15px;
}
/* Navigation Menu */
.navbar {
    margin-top: 15px;
    border: 3px solid black;
    border-radius: 10px;
    overflow: hidden;
    background-color: #333;
    font-family: "Arial Black", Gadget, sans-serif;
}
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #23004E;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: "Arial Black", Gadget, sans-serif;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #23004E;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.active{
    background-color: #400089;
}
.featured{
    margin-top: 15px;
    background-color: #420089;
    border: 3px solid black;
    border-radius: 10px;
    padding: 30px;
    overflow: auto;
}
#product_left{
    float: left;
    width: 432px;
    background-color: white;
    border: 3px solid black;
    border-radius: 10px;
    padding: 13px;

}
#product_right{
    float: right;
    width: 432px;
    background-color: #5201AA;
    border: 3px solid black;
    border-radius: 10px;
}
.welcome{
    margin-top: 15px;
    background-color: #420089;
    border: 3px solid black;
    border-radius: 10px;
    height: 500px;
    padding: 30px;
}
.welcome_header{
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 25pt;
    text-align: center;
}
.welcome_text{
    font-family: "Arial Black", Gadget, sans-serif;
    width: 800px;
    text-align: justify;
    margin: 30px auto;
    text-indent: 50px;
    font-size: 13pt;
}
.footer{
    margin-top: 15px;
    border: 3px solid black;
    border-radius: 10px;
    background-color: #333;
}
.footer_text{
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 10pt;
    text-align: center;
    color: white;
}

最后，我的 news.html(位于原始位置的页面)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/stylesheet.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <div class="container">
            <div class="banner">
                <img src="images/banner.png">
            </div>
            <div class="navbar">
                <a href="index.html" class="active">Home</a>
                <a href="news.html">News</a>
                <div class="dropdown">
                    <button class="dropbtn">Parts 
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="cases.html">Cases</a>
                        <a href="motherboards.html">Motherboards</a>
                        <a href="processors.html">Processors</a>
                        <a href="graphics.html">Graphics Cards</a>
                        <a href="storage.html">Storage</a>
                        <a href="powersupplies.html">Power Supplies</a>
                        <a href="ram.html">RAM</a>
                        <a href="other.html">Other</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">Builds 
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                        <a href="#">Placeholder</a>
                    </div>
                </div> 
                <div class="contact" id="navright">
                    <a href="contact.html" style="float:right;">Contact</a>
                </div>
            </div>
            <div class="footer">
                <p class="footer_text">Yeet</p>
            </div>
        </div>
    </body>
</html>

最佳答案

这是一个正常的行为，也是一个著名的问题。这是因为您的一个页面的内容比屏幕大，而另一个内容页面不比屏幕大。它会导致右侧的滚动条根据页面出现和消失。

你可以这样修复它:

/* One of these two solutions at the beginning of your css file */

html { overflow-y: scroll; } /* Will display the bar all the time */

/* OR */

html { margin-left: calc(100vw - 100%); }

参见:https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/

关于html - 为容器设置自动高度时，它会将页面移到上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52564484/

25 4 0
文章推荐： javascript - 如何从多个 url 获取数据并将其保存在数组中(React Native)
文章推荐： css - 绝对定位元素展开父元素
文章推荐： javascript - 该脚本工作正常，但不在 'google-apps-script' 中
文章推荐： html - 无法将此文本移至左侧
行者123
个人简介

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

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