Question

我正在尝试创建移动eDM。我希望在移动页面上显示100％的高度。我想用css而不是Jquery。

听到的是html

    <div id="owl-demo" class="owl-carousel owl-theme">
        <!-- first -->
        <div class="item">
            <div class="firstWrap">
                <div class="fw_1"><img src="images/first_global.png" alt="rocket"></div>
                <div class="fw_2"><img src="images/global_text.png" alt="글로벌 비즈니스 진출을 준비 중이십니까?"></div>
            </div>
        </div>
        <!-- //first -->

        <!-- second -->
        <div class="item">
            <div class="secondWrap">
                <div class="sw_1"><img src="images/second_infra.png"></div>
                <div class="sw_2"><img src="images/infra_text.png"></div>
            </div>
        </div>
        <!-- //second -->
</body>

和Css

body {overflow-y:hidden; margin:0 auto;}

/* header */
.header {width:100%; max-width:720px; height:auto; margin:0 auto;}
.header img {display:block; margin:0 aut0;}

.item {width:100%; height:100%; max-width:720px; margin:0 auto;}

/* first */
.firstWrap {width:100%; max-width:720px; min-height:100%; background:#003f69;}
.fw_1 {padding:35.3% 35.6% 10%;}
.fw_1 img {width:100%; margin:0 auto;}
.fw_2 {padding:0 10.9% 46.3%;}
.fw_2 img {width:100%; margin:0 auto;}

/* second */
.secondWrap {width:100%; max-width:720px; min-height:100%; background:#f04e37;}
.sw_1 {padding:35.3% 35.6% 10%;}
.sw_1 img {width:100%; margin:0 auto;}
.sw_2 {padding:0 6.8% 46.1%;}
.sw_2 img {width:100%; margin:0 auto;}

#owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

网址：http://chn0627.dothome.co.kr/test/

请告诉我，

Answer 1

我的问题不是100％清楚，你想要增加100％的身高？

我猜#owl-demo是您网站的主要“容器”。添加min-height: 100%。

为了实现该功能，您还需要设置父级的高度（否则它只会与其内容一样高）。所以将它添加到你的CSS：

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

[Offtopic]
请注意CSS中的小错误：

.header img {display:block; margin:0 aut0;}

应该是

.header img {display:block; margin:0 auto;}

移动页面上的div高度为100％

1 个答案: