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有点类似小提琴。我无法根据手机/平板电脑的尺寸设置页面的高度和宽度？

我有很多页面存在这样的问题。例如。在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高度与内容一样多。

这是一个修改过的小提琴：http://jsfiddle.net/h4pce7tL/2/

Answer 2

对于小屏幕设备，最好使用col-sm-12。并优化高度，尝试媒体查询文本大小。不要担心身高。因为高度不是很重要，所以在设计响应式布局时。

Answer 3

通常对于移动设备，我们控制WIDTH并让设备垂直滚动。

Answer 4

问题在于固定的填充底部：380px和顶部：134px。试试这个

  padding-bottom: auto;
  top: auto;

高度宽度根据设备大小 - bootstrap

4 个答案: