我正在制作一个使用100%高度的大量div的网站。现在,当文本大于页面时,我希望出现正常的滚动条。不幸的是,他们没有。无论如何,尝试overflow:auto
,情况会越来越糟。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
有谁能帮我吗?我现在完全迷路了。。在线示例:http://rune.blupfis.nl/wendy/
position:fixed on#innercontainer是问题的一部分,如果不是整个问题的话。这将像一个绝对定位的元件,并从正常流动中移除。
这里的问题是contentdiv
的高度设置为100%。这会使其展开,使其与内容的高度相同。如果你尝试更像这样的东西:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
您应该会看到滚动条出现(但现在可能会丢失一些其他样式)。