没有内容只有背景，为什么会有滚动条？ [关闭]

【问题标题】：No content just background , why is there a scroll bar? [closed]没有内容只有背景，为什么会有滚动条？ [关闭]
【发布时间】：2015-11-21 20:21:16
【问题描述】：

我真的被我网站上的一个小问题困住了。

每当我向我的 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 &#8211; 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？

【问题讨论】：

  • 你能创建 JSFiddle 还是别的什么？
  • 我认为你的标签结构搞砸了......看起来你的 NAV 标签内有一个太多的关闭 DIV 标签
  • 我不认为我可以创建一个 jsfiddle，因为我的网站在 wordpress 上。该网站是haristechnology.com

标签： css html wordpress twitter-bootstrap


【解决方案1】：

这是你的 div#nav。当您从底部向上为徽标设置动画时，Chrome 无法正确计算高度，并且您在文档底部出现大量溢出。

在您的 div#nav 的 CSS 中，添加 overflow: hidden;，您的问题就会消失。

【讨论】：

  • 谢谢，已修复！您是如何发现这是导致错误的原因？
  • 几个月前我在使用带有 animate.css 的 WOW js 时遇到了同样的问题。第二次看到你的网站，我就觉得这是同样的问题:)
【解决方案2】：

我相信身体没有视口，这很可能是导致问题的原因。通常，为 div 设置封面图像。我不是 100% 确定就是这样，但你有没有在没有背景的情况下尝试过？

【讨论】：

    【解决方案3】：

    根据你所说的很难猜到，而且不用小提琴；但这听起来像是溢出的问题。您是否尝试过在 CSS 中添加溢出：隐藏或溢出：可见？

    【讨论】：

    • 我尝试过 overflow:hidden 但这不是一个理想的解决方案，因为我的页面确实有内容溢出，虽然 overflow:hidden 确实在某些页面上解决了这个问题，但同时会导致问题确实有内容溢出的页面，因为您无法向下滚动。 ，网站是haristechnology.com
    猜你喜欢
    • 1970-01-01
    • 2020-02-26
    • 1970-01-01
    • 2012-12-11
    • 1970-01-01
    • 1970-01-01
    • 2021-12-20
    • 1970-01-01
    • 2022-08-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode