最小化Firefox和浏览器中的浏览器窗口Chrome在页面右侧添加了空白区域 [英] Minimizing browser window in Firefox & Chrome adds white space to right of page
问题描述
如标题所示，当我调整Chrome或Firefox浏览器窗口的大小时，会在页面右侧添加空格。我通过设置 width：100％到 navbar-header （参考下面的代码）来修复这个问题，另一个问题。我不知道是否可以满足这两个，但我需要它。
As the title suggests, when I resize my Chrome or Firefox browser window, little by little, white space is added to the right side of the page. I fixed this by setting width:100%to navbar-header(refer to code below), but now it's caused another problem. I'm not sure if it's possible to cater for both, but I need it to.
这有点难以解释发生了什么，所以希望下面的两个图像足够的解释。
It's a bit hard to explain what's happened, so hopefully the two images below will be enough explanation.
上图是如何将 width：100％设置为 navbar-header 下面是我想要的样子。
The above image is how my website looks after setting width:100%to navbar-header. Below is how I want it to look.
所以，有谁知道我怎么能解决这个问题？ CSS和HTML如下。
So, does anyone know how I can solve this issue? The CSS and HTML is below.
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>
推荐答案
<好吧，你可以浮动两个div。先移除 .navbar-header css上的 width：100％，然后：
Well, you can float the two divs. Remove the width: 100% on the .navbar-header css first, then:
.navbar-header {
float: left;
}
.navbar-collapse {
float: right;
}
希望这有帮助。最好。
这篇关于最小化Firefox和浏览器中的浏览器窗口Chrome在页面右侧添加了空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
