javascript - 如何将位置对齐到 3 个部分，上 - 中和下？

Question

我正在努力将 3 个部分放在全屏页面中我想要的位置，第一个位于容器中链接下方的页面上部，第二个部分位于页面中间，第二个在底部。

为此我使用 Bootstrap 和 jQuery 调整大小功能。我怎样才能做到这一点并保持位置响应？

这是我为此构建的 jsfiddle http://jsfiddle.net/froszacn/2/

这是代码

谢谢

<section class="full-screen-mobile">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-right">
                <ul class="list-inline text-right inner-nav">
                    <li><a href="https://www.domain.com/">LINK</a>

                    </li>
                    <li><a href="https://www.domain.com/">LINK</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <section class="var-screen">
        <div class="container">
            <div style="margin-left:-15px;margin-top:50px">
                <div class="col-xs-12 col-sm-6  col-md-10 col-lg-12 text-left" style="visibility: visible;">
                    <div class="logo-container">
                        <img id="index-logo" src="https://pbs.twimg.com/profile_images/3667382710/d2d5d04262024df77b1769a3d2c13c00_normal.jpeg">
                    </div>
                    <div style="clear:both;"></div>
                     <h2 style="letter-spacing:-1px;">upper section</h2>

                    <div class="divide-xs"></div>
                    <p class="lead" style="font-size:17px;">upper section<br>------</p>
                    <div class="buttons" id="download-button">
<a class="koumpi windows" href="https://www.domain.com/download">middle section<p class="sub-text">middle section</p>
</a> 
                        <p style="font-size:13px;margin-top:3px;">middle section<br>----</p>
                    </div>
                    <div class="download-apps">
                        <p>bottom section</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

预期结果

Answer 1

<!--use the code for top fixed header-->
<div class="navbar-fixed-top">header area <div>


<!--use the code for align the area in the middle-->
<div class="vertical-center-row">middel area</div>


<!--use the code for sticky footer-->
<div class="navbar-fixed-bottom">footer area</div>


[enter link description here][1]


  [1]: http://jsfiddle.net/froszacn/8/