为固定的100%高度div创建可滚动内容

Question

我想创建一个可滚动的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;*/    
}

我该怎么办才能让它发挥作用？

更新

我在小提琴中尝试了它,它是有效的.但不是在我的手机上.因此,我不知道问题应该在哪里.

因此我将整个代码附加到问题上.这对我来说非常重要.

请帮我.谢谢你的帮助.:)

Answer 1

这是你需要的吗？

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提供填充,请使用tag指定内容div coz的填充,它计算为额外高度100%+ 4em所以..

每当您想要在页面中使用时,请确保指定html和body高度为100%height:100%.