堆棧內存溢出
  簡體   English   中英

在Firefox和Chrome中最小化瀏覽器窗口會在頁面右側添加空白

[英]Minimizing browser window in Firefox & Chrome adds white space to right of page

 原文  2015-11-24 04:25:31  7   3    javascript/ jquery/ html/ css/ google-chrome

問題描述

如標題所示，當我調整Chrome或Firefox瀏覽器窗口的大小時，頁面的右側會逐漸添加空白。 我通過將width:100%設置為navbar-header來解決此問題（請參閱下面的代碼），但現在又引起了另一個問題。 我不確定是否可以同時滿足這兩個條件，但我需要這樣做。

很難解釋發生了什么，因此希望下面的兩張圖足以解釋。

在此處輸入圖片說明

上圖是將width:100%設置為navbar-header后我的網站的外觀。 以下是我想要的外觀。

在此處輸入圖片說明

那么，有誰知道我該如何解決這個問題？ CSS和HTML如下。 

 html { margin:0; padding:0; height:100%; width:100%; position:relative; } body { margin:0; padding:0; height:100%; width:100%; position:absolute; bottom:0; top:0; left:0; right:0; } p { margin:0; padding:0; color:#1C1C1C; } img { margin:0; padding:0; } .maincontainer { position:relative; padding:0; margin:0; } .container { width:100%; min-height:100%; position:relative; margin:0; padding:0; } .container:after { content:""; display:block; } .logo { float:left; margin-left:20px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } @media screen and (min-width:768px) { .logo { float:left; margin-left:5px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } } .name { float:left; margin:5px 10px 0px 10px; font-size:37px; } .type { float:left; width:50px; margin-top:6px; padding:1px 0px 1px 10px; font-size:15px; border-left:1px solid #1C1C1C; } .nav { float:right; margin:0; padding:0; list-style:none; width:300px; } @media screen and (min-width:500px) { .nav { float:right; margin:0; padding:0; list-style:none; width:444px; } } .nav li { float:left; padding:16px 10px 13px 10px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } @media screen and (min-width:500px) { .nav li { float:left; padding:16px 25px 13px 25px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } } .reposition { position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); } @media screen and (min-width: 768px) { .reposition { position:static; float:right; -webkit-transform: translate(-0%, -0%); -moz-transform: translate(-0%, -0%); } } .nav li:hover { border-bottom:2px solid #1C1C1C; } .navbar-toggle { margin-top:13px; margin-right:-5px; } .collapse { height:56px; } .navbar-header { height:55px; padding:0; margin:0; width:100%; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tim Corin Photography</title> <link href='https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab|Cinzel|Jura:400,300|Nixie+One|Advent+Pro:100,300,200' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="jquery.min.js"></script> </head> <body onLoad="switchImage('slideImg')"> <div class="maincontainer"> <div class="mainheader"> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html"> <div class="logo"> <p class="name">Tim Corin</p> <p class="type">Wildlife Photography</p> </div> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <div class="reposition"> <ul class="nav navbar-nav"> <a href=""><li class="home">Home</li></a> <a href=""><li class="gallery">Gallery</li></a> <a href=""><li>About</li></a> <a href=""><li>Contact</li></a> <a href=""><li>Blog</li></a> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="scripts.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body> </html>

3 個解決方案

解決方案1
 0 已采納  2015-11-24 04:47:23

好吧，您可以將兩個div浮動。 刪除width: 100%首先在.navbar-header css上刪除width: 100% ，然后： 

.navbar-header {
  float: left;
}

.navbar-collapse {
  float: right;
}

希望這可以幫助。 最好。

解決方案2
 0  2015-11-24 05:18:33

在navbar-header和navebar-collapse之前，我要添加兩個div名稱作為單獨的名稱。 它是navbar-header和navebar-collapse的父組。

我將提供以下CSS和HTML： 

.separate
        {
        Float: left;
        width:50%;
        }


<div class="navbar navbar-default">

            <div class="container">
            <div class="separate">
                <div class="navbar-header">
                   .......
                </div>
            </div>
            <div class="separate">
                <div class="collapse navbar-collapse">
                    <div class="reposition">
                        <ul class="nav navbar-nav" ...
                    </div>
                </div>
            </div>
</div>

        </div>

解決方案3
 0  2015-11-24 05:19:32

嘗試這個 

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Tim Corin Photography</title>

        <link href='https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab|Cinzel|Jura:400,300|Nixie+One|Advent+Pro:100,300,200' rel='stylesheet' type='text/css'>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="styles.css">

        <script type="text/javascript" src="jquery.min.js"></script>

    </head>

    <body onLoad="switchImage('slideImg')">

    <div class="maincontainer">

    <div class="mainheader">

        <div class="navbar navbar-default">

            <div class="container">

                <div class="navbar-header">

                    <div class="collapse navbar-collapse">
          <a href="index.html">

                        <div class="logo">

                            <p class="name">Tim Corin</p>

                            <p class="type">Wildlife Photography</p>

                        </div>

                    </a>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>
                    <div class="reposition">

                    <ul class="nav navbar-nav">

                        <a href=""><li class="home">Home</li></a>
                        <a href=""><li class="gallery">Gallery</li></a>
                        <a href=""><li>About</li></a>
                        <a href=""><li>Contact</li></a>
                        <a href=""><li>Blog</li></a>

                    </ul>

                    </div>

</div>

                </div>



            </div>

        </div>

    </div>

    </div>

    <script type="text/javascript" src="scripts.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    </body>

</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 頁面右側的空白 Firefox和Chrome頁面底部的空白 在瀏覽器窗口中居中，可在野生動物園中使用，但在Firefox或Chrome中無法使用 Firefox和Chrome中window.open瀏覽器問題 Chrome中div下方的空白，但不是Firefox（HTML5） Safari、IE、Chrome 中 div 之間的主題瀏覽器空白 在Firefox/Chrome頁面打開IE瀏覽器 瀏覽器窗口頂部的HTC Android（4.0.3）上的空白（空白） 網站在IE 8上的Chrome / Firefox / IE 9+但白頁顯示正常 web頁面右側出現未知空白
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM