Создать прокручиваемый контент для фиксированной высоты 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;*/  
} 

Что мне делать, чтобы заставить его работать?

Update

Я попробовал его в скрипке, и она работала. Но не на моем телефоне. Из-за этого я не знаю, где должна быть проблема.

Из-за этого я приложил весь свой код к вопросу. Это очень важно для меня, чтобы он работал.

Пожалуйста, помогите мне. Спасибо за любую помощь. :)

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 контента он вычисляет, как дополнительный рост 100% + 4em так ..

И убедитесь, что вы указываете html и body height как 100%, когда хотите использовать height:100% на своей странице.

Answer 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/