Question

我有一个小的html和css脚本，不包含很多，一切都运行正常。但是我不知道发生了什么，但由于某种原因我有一个滚动条，我可以滚动浏览我的页面，即使我有溢出：隐藏我不知道为什么有一个滚动条那里。任何形式的帮助将不胜感激。

HTML

<!DOCTYPE HTML>
<html>

<head>
        <title>OUZO</title>
  <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="animate.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="images/logo-4.ico">

<script src="jquery.nicescroll.js">
</script>

      <script>

$(document).ready(
function() {
$("#video-wrapper").niceScroll();
$("#news-wrapper").niceScroll();
$("#games-wrapper").niceScroll();
$("#music-wrapper").niceScroll();
}
);
</script>


</head>

<body>

  <nav align="middle">

    <ul>
        <li><a href="videos.html"><img src="images/video-menu.png" class="vid" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/video-menu-hover.png'"onmouseout="this.src='images/video-menu.png';"></a></li>
        <li><a href="#"><img src="images/news-menu.png" class="news" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/news-menu-hover.png'"onmouseout="this.src='images/news-menu.png';"></a></li>
        <li><a href="#"><img src="images/logo.png" class="home" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo.png';"></a></li>
        <li><a href="#"><img src="images/games-menu.png" class="games" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black;border-left:8px solid black;" onmouseover="this.src='images/games-menu-hover.png'"onmouseout="this.src='images/games-menu.png';"></a></li>
        <li><a href="#"><img src="images/music-menu.png" class="music" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black; border-left:8px solid black;" onmouseover="this.src='images/music-menu-hover.png'"onmouseout="this.src='images/music-menu.png';"></a></li>
    </ul>



</nav>


  <div class="left-border"></div>
<div class="right-border"></div>

<div class="container">

  <div class="content-container">

    </div>
  <div class="content-container">

      </div>
  <div class="content-container">

    </div>
  <div class="content-container">

  </div>




<footer>
<img src="images/logo-footer.png"  style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo-footer.png';">


</footer>

</body>


</html>

CSS

    html, body{

height: 100%;
overflow: hidden;
}

li {

display: inline;
margin-right: .75em;
padding: 2px;
z-index: 0;

}

ul {
position: fixed;
left: 0;
right: 0;;
margin: 0;
padding: 0;
top: 0;
border-bottom: 8px solid black;
border-width: 100%;
background-color: #d8d8d8;
z-index: 0;
}

nav {

margin-top: 4%;
}

a {
font-size: 15px;
color: black;
text-decoration: inherit;
}

.left-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
bottom: 0;
left:0; 
z-index: -1;


}

.right-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
right: 0;
bottom: 0;
z-index: -1;

}

.container {
width: 700px;
height: 680px;
margin-left: 22%;
padding: 0;
margin-top: 7.5%;
background-color: red;


}

.content-container {
float: left;
margin: 2%;
padding: 8.3%;
padding-left: 9%;
width: 200px;
height: 200px;
background-color: #d8d8d8;
z-index: 1;
}

footer{
position: fixed;
bottom: 0;
left: 0;
height:10%;
width:100%;
border-top: 8px solid black;
background-color: #d8d8d8;
z-index: 1;

}

footer img{
position: fixed;
bottom: 0.5%;
left: 45%;
z-index: 1;

}

@font-face {
font-family: Font;
src: url('fonts/font.woff') format('woff'),
url('fonts/font.woff');
}

Answer 1

您的div容器似乎未正确关闭

<div class="container">

   <div class="content-container">
   </div>
   <div class="content-container">
   </div>
   <div class="content-container">
   </div>
   <div class="content-container">
   </div>

添加

</div>

Answer 2

<div class="container">

  <div class="content-container">

    </div>
  <div class="content-container">

      </div>
  <div class="content-container">

    </div>
  <div class="content-container">

  </div>

</div > <!-- you forget to add dis div -->

溢出：隐藏不起作用

2 个答案: