Html 为固定的 100% 高度 div 创建可滚动内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16772034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create scrollable content for a fixed 100% height div
提问by Gábor
I would like to create a scrollable div. I know here is lots of example, but neither of them works for me.
我想创建一个可滚动的 div。我知道这里有很多例子，但它们都不适合我。
I have a .page class, which fills my mobile's screen. Inside of it I have a .content div. This is contain the content of the pages. It is just align the content from the top, and it should have to scroll the content if it is going out of the .content's boundaries.
我有一个 .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;*/
}
What should I do to get it working?
我应该怎么做才能让它工作？
Update
更新
I tried it in fiddle, and it is worked. But not on my phone. Because of it I don't know where should be the problem.
我用小提琴试过了，它奏效了。但不是在我的手机上。因为它我不知道应该是哪里出了问题。
Because of it I attached my whole code to the question. This is very important for me to get it working.
因此，我将整个代码附加到了问题中。这对我让它工作非常重要。
Please help me. Thanks for any help. :)
请帮我。谢谢你的帮助。:)
回答by Sowmya
Is this what you need??
这是你需要的吗？？
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
}
Use spantag to specify the padding for content div coz if you give padding to the content div it calculates as additional height 100%+4em so..
使用span标记来指定内容 div 的填充，因为如果您为内容 div 提供填充，它计算为附加高度 100%+4em 所以..
And make sure that you are specifying htmland bodyheight as 100% whenever you want to use height:100%in your page.
并确保您指定html和body高度为100％，当你想使用height:100%你的页面。
回答by HADI
You need to get window height for that and need to set it for .page. Anyway, you may need to add some javascript for that. I used jQuery for solution. [you can use other library, its up to you. I am suggesting you this solution]
您需要为此获取窗口高度并需要将其设置为.page. 无论如何，您可能需要为此添加一些 javascript。我使用 jQuery 来解决。[您可以使用其他库，这取决于您。我建议你这个解决方案]
Here is markup:
这是标记：
<div class="page">
<div class="content">
</div>
</div>
CSS:
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:
JS：
$('document').ready(function(){
var wHeight = $(window).height();
$('.page').css({
'height' : wHeight + 'px'
});
});
Just see this fiddle link - (live demo) - http://jsfiddle.net/LZT7B/
看看这个小提琴链接 - （现场演示） - http://jsfiddle.net/LZT7B/
