Javascript 如何将位置对齐到上、中、下三个部分？ 我努力把3个部分放在一个全屏页面中，页面的上方第一个页面下面的链接，页面中间的第二个部分，底部的第二个部分。

我使用bootstrap和jQuery resize函数。我如何才能做到这一点，并保持立场的反应呢

这是我为此构建的JSFIDLE

这是代码

多谢各位

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

上段
上部部分
------

中间部分
----

底部

预期结果

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

收割台区域
中部地区
页脚区域
[在此处输入链接说明][1]
[1]: http://jsfiddle.net/froszacn/8/

现在有什么问题？？您的小提琴，虽然没有正确加载css，但已经设置了您所需要的@GuurPrasaDRAO我希望这3个部分在页面的顶部，在页面的中间和页面的底部。现在，他们不是。你能发布你想要的和现在的截图吗，因为我还不清楚@我已经用截图更新了我的问题，谢谢！所以你是说它没有覆盖整个页面？？垂直中心行是什么？我需要部分在容器中，而不是在整个页面中