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

我想创建一个可滚动的div。我知道这里有很多例子，但它们都不适合我。为固定的100％高度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;*/  
}

我该怎么做才能使它工作？

更新

我试图在拨弄，并且它的工作。但不是在我的手机上。正因为如此，我不知道问题出在哪里。

正因为如此，我附上我的整个代码的问题。这对我来说是非常重要的。

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

来源

2013-05-27 Gábor

提供你的小提琴代码。 – Nitesh

'overlofw-y：auto;'？ –

在我问这个问题之前，我尝试了所有无望的事情。 –

这是你需要的吗？

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所以..

而且请确保您指定html和body高度为100％，只要您想在页面中使用height:100%即可。

来源

2013-05-27 11:41:15 Sowmya

您需要获取窗口高度，并需要将其设置为.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/

来源

2013-05-27 11:40:46 HADI

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

回答

相关问题