Question

我遇到一个问题，当我的网页内容超出浏览器窗口时，浏览器滚动条不会出现。我很确定问题是在容器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;
}

Answer 1

编辑：

我将“侧边栏”视为“滚动条”;这个答案解决了滚动条的问题无论如何，什么是“浏览器边栏”？

body { ... overflow:hidden; ... }

应该是

body { ... overflow:auto; ... }

或者只是删除它。

Answer 2

我认为您正在谈论的“侧边栏”是在您向其添加div class=box之后剩余容器的黑色背景。它没有显示的原因是因为你实际上没有侧栏div。

添加一个＆lt; div class="sidebar"></div>

和css（包括clearfix）将clearfix类添加到父容器中，例如...... <div id="container clearfix">

FIDDLE

.sidebar {
    width:200px;
    height:600px;
    background:red;
    float:right;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

浏览器滚动条没有出现

2 个答案: