Эластичный экран\страница.

Подстраивается под разрешение экрана.

by Denis Tverdokhlebov

HTML

<div class="scene scene-1 at-middle">
    <div class="middle">
        Some content
    </div>
</div>
    
<div class="scene scene-2">
    Some content
</div>
    
<div class="scene scene-3">
    Some content
</div>

SCSS

html,body {
    min-height: 100%;
}

.at-middle {
    &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .middle {
        display: inline-block;
        vertical-align: middle;
        max-width: 95%;
    }
}

.scene {
    display: block;
}

.scene-1 {
    background: yellow;
    text-align: center;
    .middle {
        background: orange;
        padding: 30px;
    }
}

JavaScript

var sceneControl = function(){
    var $window = $(window);
    var $scene  = $('.scene');
    
    $window.resize(function(){
        $scene.css('height',$window.height()+'px');
    }).trigger('resize');
    
};

sceneControl();