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

Posted 2023-03-07

【中文标题】为固定的 100% 高度 div 创建可滚动内容

【英文标题】：Create scrollable content for a fixed 100% height div

【发布时间】：2013-05-27 11:20:06

【问题描述】：

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

我应该怎么做才能让它工作？

更新

我在小提琴中尝试过，它有效。但不是在我的手机上。因为它，我不知道问题应该出在哪里。

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

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

【问题讨论】：

提供你的小提琴代码。

overlofw-y: auto; ?

在我问这个问题之前，我绝望地尝试了一切。

你在用什么手机？

我应该纠正自己，电话。 Iphone、三星 Galaxy s 和一张桌子（m-tech aTab 7）

【参考方案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 的填充，因为如果你给内容div 提供填充，它计算为额外高度100%+4em 所以..

并确保在您想在页面中使用height:100% 时将html 和body 高度指定为100%。

【参考方案2】：

您需要为此获取窗口高度并需要为.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/