[英]Why don't I have a scroll bar?
我正在使用HTML,CSS和PHP创建网站,并且页面超出了屏幕的范围,但是浏览器没有提供滚动条(在Mac上为Safari 5.0.6和Firefox 14.0.1)。 是因为我包括了PHP吗? 但是在呈现页面之前不应该在那吗?
这里是一个链接: 测试网站
我的PHP语法:
<div id="content">
<div class="wrapper">
<div id="home" class="alert">
Welcome to always4free©! To browse the classifieds, you must first either choose a location or have your location detected.
</div>
<?php include "res/pages/categories.php"; ?>
</div>
</div>
</div>
到底是怎么回事?
编辑:这是我的CSS:
body {
background-image: url("http://always4free.org/site/images/bg.jpg");
background-size: cover;
font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
margin: 0 auto;
width: 850px;
}
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#logo {
color: rgba(255, 255, 255, 0.7);
float: left;
font-family: "Wendy One",sans-serif;
font-size: 30px;
line-height: 50px;
width: 250px;
}
#logo a:hover {
color: #FFFFFF;
}
#nav {
float: right;
line-height: 50px;
width: 600px;
}
#nav a:first-child {
margin-left: 0;
}
#nav a:last-child {
margin-right: 0;
}
#nav a:link, #nav a:visited {
color: rgba(255, 255, 255, 0.9);
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#nav a:hover {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
padding-bottom: 1px;
}
#nav a.detect {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px 2px 2px 2px;
color: rgba(0, 0, 0, 0.7);
padding: 5px;
}
#nav a.detect:hover {
color: #000000;
}
#content {
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-top: 70px;
}
.page {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border: 1px solid green;
color: #FFFFFF;
font-size: 20px;
padding: 10px;
}
.alert {
background: none repeat scroll 0 0 #AD2E1D;
border: 1px solid #911E0F;
color: white;
font-size: 20px;
padding: 10px;
text-align: center;
}
#categories {
margin-top: 20px;
}
#categories h2 {
color: rgba(255, 255, 255, 0.7);
font-family: "Wendy One",sans-serif;
font-size: 26px;
}
#categories a:link, #categories a:visited {
background: none repeat scroll 0 0 white;
color: black;
padding: 3px;
}
#categories .block {
line-height: 35px;
}
您将所有内容包装在position: fixed;
元素中position: fixed;
。 主体无法检索固定或绝对子代的高度,因此将其设置为实际高度0-因此无需滚动。
如果将#content
元素移到固定标题之外,则应该可以正常工作。
将具有ID content
的div移动到header
div之外。
它将解决您的问题。
添加溢出:滚动; 以您的#header样式并将位置更改为relative 。
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: **relative**;
top: 0;
width: 100%;
**overflow: scroll;**
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.