请检查以下示例:
如果没有出现垂直滚动条,请调整窗口大小。问题是:当你向下滚动时,隐藏的屏幕部分不会显示蓝色div背景,其高度为100%,即使红色div强制“页面”的整体高度大于一个屏幕。
我希望蓝色背景跨越整个页面,即使页面大于一个屏幕。我怎么能做到这一点? (我已经建议使用javascript解决方案,但更喜欢仅使用CSS的方法)
提前致谢!
答案 0 :(得分:2)
内部元素是否重要?如果不是:
* { margin:0; padding:0; }
html, body { height:100%; }
#main-div { min-height:100%; width:400px; margin:0 auto; background:blue; }
<body><div id="main-div">test</div></body>
答案 1 :(得分:2)
100%表示可视区域的100%,即屏幕尺寸,因此按设计工作。
您可能感兴趣的是position: fixed,虽然旧的IE浏览器存在以下问题:ref,ref2
答案 2 :(得分:2)
如果你在主div中使用填充然后在内部div中使用相对位置它可能会起作用,我不太确定你是否想要这种行为,希望这可以让你更接近什么你正在寻找。
#main-div {
background:blue none repeat scroll 0 0;
height:100%;
left:50%;
margin-left:-200px;
position:absolute;
width:400px;
padding:20;
}
#sub-div {
background:red none repeat scroll 0 0;
height:200px;
left:50px;
position:relative;
width:200px;
float:left;
}
答案 3 :(得分:1)
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow-y:hidden;
overflow-x:hidden;
}
#main-div {
width: 400px;
height:100%;
position: absolute;
left: 10%;
background: blue;
}
#sub-div {
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 400px;
background: red;
}
#container{
position:absolute;
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:scroll;
}
</style>
</head>
<body>
<div id="main-div"></div>
<div id="container">
<div id="sub-div"></div>
</div>
</body>
</html>
答案 4 :(得分:0)
通过强制某个高度(大于固定大小的元素)来解决问题,并且生活有限制。
感谢您提供所有答案,但在其他一些情况下,它们可能会有所帮助!