我真的被困在我网站上的一个小问题上。
每当我向我的HTML添加一个视口时，它就会创建一个滚动条，即使没有内容溢出。
我使用Bootstrap作为CSS框架。
body {
/* Location of the image */
background-image: url(http://www.haristechnology.com/images/footer_lodyas.png);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
.navbar-default {
font-size: 26px;
background-color: rgba(0, 0, 0, 1);
border-width: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(12, 245, 229, 0.59);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: rgba(20, 250, 39, 1);
background-color: rgba(0, 0, 0, 1);
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover,
#nav.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #000000;
}
.custom{
margin-top:15%;
}
这是HTML
<head>
<meta charset="UTF-8">
<title> HarisTechnology</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta name="description" content="HarisTechnology – Website">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/haristechnology.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='mcafeesecure_css-css' href='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.css?ver=1.0' media='' />
<link rel='stylesheet' id='normalize-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='html5blank-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/style.css?ver=1.0' media='all' />
<script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.js?ver=1.0'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/scripts.js?ver=1.0.0'></script>
<link rel="shortcut icon" href="http://haristechnology.com/wp-content/uploads/2015/05/favicon.ico"/>
<style type="text/css">
.screen-reader-response {
display: none;
}
</style>
<script>
conditionizr.config({
assets: 'http://haristechnology.com/wp-content/themes/html5blank-stable',
tests: {}
});
</script>
</head>
<body class="home page page-id-34 page-template-default logged-in index">
<div class="container">
<div class="col-md-12">
<div class="row">
<div style="background-color:transparent;border:0px;border-radius:0;margin-top:-1%;width:100%; height:25%;"class="well">
<!--Navigation Starts -->
<div style="margin-top:1%;"id='nav'>
<img class="animated bounceInUp" src="images/banner.png" style="width:100%;" />
<br>
<br>
<nav class="navbar navbar-default animated fadeIn" role="navigation">
<div class="navbar-header">
<button type="button" style="background-color:#FF1919 !important;" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
<a class="navbar-brand" href="http://www.haristechnology.com/">HarisTechnology</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul id="menu-default" class="nav navbar-nav"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-36 active"><a title="Home" href="http://haristechnology.com/">Home</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="Products" href="http://haristechnology.com/productspage">Products</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="Contact" href="http://haristechnology.com/contact-2">Contact</a></li>
</ul> </div>
</div>
</nav>
<!--Navigation ENDS -->
<!--Content Starts -->
<!-- /header -->
<div class="jumbotron" style="margin-left: 0%; border-radius: 0; margin-top: 0%; width: 100%;">
<h1>Hello</h1>
</div>
<div style="background-color:#AAF200;margin-left:0%;border-radius:0;margin-top:0%;width:100%"class="jumbotron">
<center>
<h2>
Website under construction.
</h2>
</center>
</div>
<h3 class="pull-right" style="color:#cde2bd;">Developed by HarisTechnology.</h3>
<!--Footer ENDS -->
</div>
</div>
</div>
</div>
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript">
(function() {
var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true;
sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sa, s);
})();
</script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/haristechnology.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.2'></script>
<script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/scripts.min.js?ver=1.1.0'></script>
<!-- analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62813338-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
(function() {
var sa = document.createElement('script'); sa.type = 'text/javascript'; sa.async = true;
sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sa, s);
})();
</script>
</html>
非常感谢任何帮助。
注意：此问题仅发生在Chrome目前，而不是Internet Explorer？
答案 0 :(得分：0)
我认为身体没有视口，这很可能导致问题。通常，为div设置封面图像。我不是百分之百肯定的，但你有没有背景尝试过吗？
答案 1 :(得分：0)
很难根据你所说的内容进行猜测，而且没有小提琴;但这听起来像溢出的问题。您是否尝试过将overflow：hidden或overflow：visible添加到CSS？
答案 2 :(得分：0)
这是你的div＃nav。当您从底部向上设置徽标动画时，Chrome无法正确计算高度，并且文档底部会出现大量溢出。
在div＃nav的css中，添加overflow: hidden;，您的问题就会消失。