我遇到一个问题，当我的网页内容超出浏览器窗口时，浏览器滚动条没有出现。我很确定问题出在容器 div 而不是页脚，因为删除页脚不会改变任何东西。有什么建议吗？
这是 html 部分。
<html>
<head>
<link rel ="stylesheet" type="text/css" href="style.css"></link>
<style>
body {background-color:#64B6B1;}
</style>
</head>
<body>
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="footer">
<div class="icon"><h2>AB</h2></div>
<ul>
<li><a href="webdesign.html"><div class="webdesign" style="background-color:#64B6B1;width:25px;height:25px;"></div></a></li>
<li><a href="graphicdesign.html"><div class="graphic"></div></a></li>
<li><a href="about.html"><div class="about"></div></a></li>
<li><a href="index.html"><div class="home"></div></a></li>
</ul>
</div>
</body>
</html>
这是 CSS 部分。
@charset "utf-8";
html {height:100%;}
body {
font-family:Arial Narrow, sans-serif;
color:#FFFFFF;
text-align:right;
height:100%;
overflow:hidden;
}
h1 {font-family:Arial, sans-serif;}
.box {
width:390px;
height:300px;
float:left;
background-color:#CCCCCC;
}
#container {
position:absolute;
width:80%;
min-width:780px;
top:10%; right:0; left:0;
margin: auto;
padding:5px;
background-color:#000000;
}
/* FOOTER */
#footer {
width:100%;
height:50px;
position:fixed;
bottom:0;
right:0;
z-index:10;
overflow:hidden;
background-color:#FFFFFF;
}
ul {
list-style-type:none;
float:right;
margin:0;
padding:15px;
}
li {
display:inline;
float:right;
padding-left:10px;
}
div.home {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}
div.home:hover {
width:25px;
height:25px;
background-color:#8AB688;
}
div.about {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}
div.about:hover {
width:25px;
height:25px;
background-color:#DED4B9;
}
div.webdesign {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}
div.webdesign:hover {
width:25px;
height:25px;
background-color:#64B6B1;
}
div.graphic {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}
div.graphic:hover {
width:25px;
height:25px;
background-color:#CE534D;
}
div.icon {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color: #FFFFFF;
width:35px;
height:35px;
float:left;
margin-left: 5px;
margin-top: 4px;
border-style:double;
border-color:#46433A;
}
h2 {
font-size:18px;
font-family:Arial Narrow,sans-serif;
color:#46433A;
margin-top:7px;
margin-right:6px;
}
最佳答案
编辑:
I read "sidebar" as "scrollbar"; This answer solves a scrollbar problem.
Anyway, what the heck is "browser sidebar"?
body { ... overflow:hidden; ... }
应该是
body { ... overflow:auto; ... }
或者只是删除它。
关于html - 浏览器滚动条不出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17977403/