jquery - 根据设备尺寸的高度宽度 - Bootstrap

Question

我有一个如下所示的 div 元素

<!--CONTENT WRAPPER -->
<div class="content-wrapper about-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <p>Dear friends,</p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.! </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page. </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page. </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page. Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.</p>
                <br>
                <p>I wish you a good experience and a super day ahead! </p>
                <br>
                <p>Yours sincerely,</p>
            </div>
        </div>
    </div>
</div>
<!--CONTENT WRAPPER -->

Here's有点类似 fiddle 。我无法根据手机/平板电脑的尺寸设置页面的高度和宽度？

我有许多页面存在此类问题。例如。在 iPad 上，当页面上的内容较少时，我会在下方看到一个空白区域。

例如，此页面内容较少，但如果我滚动我看到空白未使用的空间，情况不应该是这样。

<div class="content-wrapper contact-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>CONTACT US</h1>
                        <br>
                        <p>test.comm </p>
                        <p>TEST PVT LTD</p>
                        <p>Mumbai 400012, India.</p>
                        <p>Contact No. :   + 91 21455487 </p>
                        <p>[Mon-Sat, 9:30 AM - 5:30 PM IST]</p>
                        <p>Toll Free No.   :   145414 </p>
                        <p>[Toll free while calling from within India]</p>
                        <p>Email ID    :   abc@pqr.com</p>
                    </div>
                </div>
             </div>
         </div>

它的 CSS 在这里:

.contact-wrapper {
    position: relative;
    padding-bottom: 380px;
    top:134px;
}
.contact-wrapper p {color: #fff;
    font-size: 13px;
    line-height: 15px;
}

最好的解决方案是什么？

媒体查询？

请提出建议。

Answer 1

所以你是想让联系人包装器填满整个页面吗？如果是，则需要设置

html, body {
    height: 100%;
}

为了覆盖整个高度。否则，contact-wrappers 的高度与其内容一样多。

这是一个修改过的 fiddle :http://jsfiddle.net/h4pce7tL/2/