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

时间：2018-09-29 02:12:38

标签： html css

非常多，我有一个带有两个div的容器。我将每个div设置为浮动到不同的一侧。左一右一，现在我遇到的问题是，由于我必须手动设置高度，因此它会将页面从原始位置偏移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>

stylesheet.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>

3 个答案:

答案 0 :(得分：1)

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

您可以这样修复它：

/* 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/

答案 1 :(得分：0)

那里有垂直滚动条吗？看起来页面的宽度是相同的，但由于滚动条的可见性，中间对齐是浮动的。

答案 2 :(得分：0)

  

这是由于滚动条出现在索引页面和   没有出现在新闻页面上。

当您指定一个静态高度时，有意引起滚动条出现，并且页面宽度看起来是相同的。 在这种情况下，一切正常。

  

如果您真的很想使它们相同，请插入足够的一个   内容到新闻页面以使滚动出现或计算宽度   更精确（使用％代替px，em，rem）。

相关问题
最新问题