移动页面上的 div 高度 100%

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%;
}

[题外话]
请注意您的 CSS 中的一个小错字：

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

应该是

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