我想创建一个可滚动的div。我知道这里有很多例子,但它们都不适合我。
我有一个.page类,它填满了我的手机屏幕。在里面我有一个.content div。这包含页面的内容。它只是从顶部对齐内容,如果内容超出.content的边界,它应该滚动内容。
.page{
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
display: block;
}
.content{
padding: 4em 0 0 0;
overflow-x: hidden;
overlofw-y: auto;
/*-webkit-overflow-scrolling: touch;*/
}
我该怎么办才能让它发挥作用?
更新
我在小提琴中尝试过它,并且它有效。但不是在我的手机上。因此,我不知道问题应该在哪里。
因此我将整个代码附加到问题上。这对我来说非常重要。
请帮帮我。谢谢你的帮助。 :)
答案 0 :(得分:11)
这是你需要的吗?
html, body{
height:100%;
margin:0;
padding:0;
}
.page{
margin: 0;
padding: 0;
height: 100%;
width: 50%;
display: block; border:solid #000 1px
}
.content{
padding:0;
overflow: scroll; overflow-x:hidden;
height:100%
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block
}
<强> DEMO 强>
使用span
标记指定内容div coz的填充,如果你给它计算的内容div填充为额外高度100%+ 4em所以..
每当您想在页面中使用html
时,请确保将body
和height:100%
身高指定为100%。
答案 1 :(得分:-1)
您需要获得窗口高度,并需要将其设置为.page
。无论如何,您可能需要添加一些javascript。我使用jQuery解决方案。 [你可以使用其他图书馆,由你决定。我建议你这个解决方案]
这是标记:
<div class="page">
<div class="content">
</div>
</div>
CSS:
* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */
html, body { height:100%; height:100% }
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em }
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed }
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; }
JS:
$('document').ready(function(){
var wHeight = $(window).height();
$('.page').css({
'height' : wHeight + 'px'
});
});
只需看到这个小提琴链接 - (现场演示) - http://jsfiddle.net/LZT7B/