HTML/CSS 页面不可滚动

标签 html css scroll

在大屏幕上，我的页面有黑色/灰色笔划，我在小屏幕上看不到。我的页面似乎没有向下滚动。 我用了 overflow-y: scroll;体内。 我不知道我做错了什么。

这是我的代码:

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  height: 100%;
  margin: 0px;
  overflow-y: scroll;
  background: #262626;
  background:url("backgroundmusic.gif") no-repeat,-webkit-linear-gradient(#404040 , #0d0d0d); /* For Safari 5.1 to 6.0 */
  background: url("backgroundmusic.gif") no-repeat,-o-linear-gradient(#404040, #0d0d0d); /* For Opera 11.1 to 12.0 */
  background: url("backgroundmusic.gif") no-repeat,-moz-linear-gradient(#404040, #0d0d0d); /* For Firefox 3.6 to 15 */
  background: url("backgroundmusic.gif") no-repeat,linear-gradient(#404040 , #0d0d0d); /* Standard syntax */

}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 20px;
	padding-right: 0px;
    overflow: hidden;
    background-color: #262626;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: #b3b3b3;
    text-align: center;
    padding: 18px 20px;
    text-decoration: none;
}

a:hover {
	color:white;
}

li img {
	padding-left: 0px;
}

h1 {
	text-align: center;
	color: white;
	font-family: 'Varela', sans-serif;
	font-size: 65px;
	letter-spacing: 1.5px;
}

h3 {
	text-align: center;
	color: #f2f2f2;
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	letter-spacing: 1px;
	line-height: 55px;
}

.midtext {
	text-align: center;
	position: relative;
	margin-bottom: 0%;
	margin-top: 5%;
}

.midtext-content {
	display: inline-block;
	text-align: left;
	color: white;
	font-size: 30 px;
	letter-spacing: 0.8px;
	line-height: 35px;
	word-spacing: 0.5px;
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 7px;
  background-color: #1a1a1a;
  text-align: left;
  color: #666666;
  font-size: 12px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #262626;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: #bfbfbf;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #4d4d4d;
							color: white;}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
	<title>
		Hip Hop Music
	</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="hiphop.css">
	<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
	<meta charset="UTF-8">
</head>
<body>
<ul>
  <li><a href="hiphop.html"><img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;"></a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">History</a>
    <div class="dropdown-content">
      <a href="Reggae.html">Reggae</a>
      <a href="OldSchool.html">Old-School</a>
      <a href="Modern.html">Modern</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Playlists</a>
    <div class="dropdown-content">
      <a href="PlaylistReggae.html">Reggae Playlist</a>
      <a href="PlaylistOldSchool.html">Old-School Playlist</a>
      <a href="PlaylistModern.html">Modern Playlist</a>
	  <a href="* Nog in te vullen *">Your Playlist ?</a>
    </div>
  </li>
  <li><a href="http://www.google.com">About</a></li>
  <li><a href="http://www.google.com">Contact</a></li>
</ul>

<h1>Defining Relevant Music</h1>
<h3>Welcome to the world of Hip Hop music</h3>
<h4 class="midtext">
	<div class="midtext-content">
	Altijd al meer willen weten over Hip Hop? Dan is deze site voor<br>
	jou. Alles over Hip Hop muziek. Van de geschiedenis tot verschillende<br>
	stijlen (met tracks!) om je een idee te geven wat Hip Hop muziek nou<br>
	eigenlijk inhoudt.
	</div>
<h4>

<div class="footer">©Mats László & Betien Baziany inc.</div>
</body>
</html>

最佳答案

您还需要设置 html 的高度:

html {
  min-height: 100%;
}


html {
  min-height: 100%;
}
body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  height: 100%;
  margin: 0px;
  overflow-y: scroll;
  background: #262626;
  background: url("backgroundmusic.gif") no-repeat, -webkit-linear-gradient(#404040, #0d0d0d);
  /* For Safari 5.1 to 6.0 */
  background: url("backgroundmusic.gif") no-repeat, -o-linear-gradient(#404040, #0d0d0d);
  /* For Opera 11.1 to 12.0 */
  background: url("backgroundmusic.gif") no-repeat, -moz-linear-gradient(#404040, #0d0d0d);
  /* For Firefox 3.6 to 15 */
  background: url("backgroundmusic.gif") no-repeat, linear-gradient(#404040, #0d0d0d);
  /* Standard syntax */
}
ul {
  list-style-type: none;
  margin: 0;
  padding-left: 20px;
  padding-right: 0px;
  overflow: hidden;
  background-color: #262626;
}
li {
  float: left;
}
li a {
  display: inline-block;
  color: #b3b3b3;
  text-align: center;
  padding: 18px 20px;
  text-decoration: none;
}
a:hover {
  color: white;
}
li img {
  padding-left: 0px;
}
h1 {
  text-align: center;
  color: white;
  font-family: 'Varela', sans-serif;
  font-size: 65px;
  letter-spacing: 1.5px;
}
h3 {
  text-align: center;
  color: #f2f2f2;
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 55px;
}
.midtext {
  text-align: center;
  position: relative;
  margin-bottom: 0%;
  margin-top: 5%;
}
.midtext-content {
  display: inline-block;
  text-align: left;
  color: white;
  font-size: 30 px;
  letter-spacing: 0.8px;
  line-height: 35px;
  word-spacing: 0.5px;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 7px;
  background-color: #1a1a1a;
  text-align: left;
  color: #666666;
  font-size: 12px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #262626;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: #bfbfbf;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #4d4d4d;
  color: white;
}
.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    Hip Hop Music
  </title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="hiphop.css">
  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
  <meta charset="UTF-8">
</head>

<body>
  <ul>
    <li>
      <a href="hiphop.html">
        <img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;">
      </a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">History</a>
      <div class="dropdown-content">
        <a href="Reggae.html">Reggae</a>
        <a href="OldSchool.html">Old-School</a>
        <a href="Modern.html">Modern</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Playlists</a>
      <div class="dropdown-content">
        <a href="PlaylistReggae.html">Reggae Playlist</a>
        <a href="PlaylistOldSchool.html">Old-School Playlist</a>
        <a href="PlaylistModern.html">Modern Playlist</a>
        <a href="* Nog in te vullen *">Your Playlist ?</a>
      </div>
    </li>
    <li><a href="http://www.google.com">About</a>
    </li>
    <li><a href="http://www.google.com">Contact</a>
    </li>
  </ul>

  <h1>Defining Relevant Music</h1>
  <h3>Welcome to the world of Hip Hop music</h3>
  <h4 class="midtext">
	<div class="midtext-content">
	Altijd al meer willen weten over Hip Hop? Dan is deze site voor<br>
	jou. Alles over Hip Hop muziek. Van de geschiedenis tot verschillende<br>
	stijlen (met tracks!) om je een idee te geven wat Hip Hop muziek nou<br>
	eigenlijk inhoudt.
	</div>
<h4>

<div class="footer">©Mats László & Betien Baziany inc.</div>
</body>
</html>

关于HTML/CSS 页面不可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41566762/

上一篇：Javascript 图像 slider 无法正常工作

下一篇：html - 从 materializecss 中删除输入样式

相关文章：

javascript - Bootstrap Carousel 在 Bootply 中工作，而不是在浏览器中工作

javascript - PhantomJS 页面未考虑外部 CSS

javascript - 仅通过悬停显示滚动条

jquery - 更改滚动的 CSS 属性

javascript - 如何在 IE 中通过 src 属性隐藏图像？

html - 我需要修改表单上的字段显示吗？.. Ruby on Rails...RoR...

html - 防止 div 在有填充时垂直移动

html - 当我点击一个链接时，大多数浏览器会在它周围绘制一个虚线框。我怎样才能防止这种情况发生？

python - Python中的无限滚动背景

PHP MySQL 数据库多重过滤

©2024 IT工具网  联系我们