所以我事先在这里进行了搜索,试图找到我的问题的答案,但我找到的所有解决方案都没有给我任何结果。基本上,我的 div#wrapper 中有一个我想显示的图像,但除非我用文本填充相应 div 之后的区域,否则它不会显示。
我有溢出:自动;在我的#wrapper 中,因为我在后续的 div 中有浮动。
CSS 文件:
@media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
@media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML 文件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><a href="index.html"><img src="images/buttons/btn_logo.png"></a></div>
<div id="primaryNav">
<a href="index.html"><img src="images/buttons/btn_home.png"></a>
<a href="index.html"><img src="images/buttons/btn_link1.png"></a>
<a href="index.html"><img src="images/buttons/btn_link2.png"></a>
<a href="index.html"><img src="images/buttons/btn_link3.png"></a>
<a href="index.html"><img src="images/buttons/btn_link4.png"></a>
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
我没有最模糊的线索我做错了什么。有人有想法么?:/