Question

我已经将100％应用于html和body，而child元素是.wrapper，它也在CSS中也应用了100％。我不明白为什么它不会像你在图片中看到的那样应用100％。

html, body {
  height: 100%;
  overflow-y: hidden;
  overflow-x:visible;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

html非常简单：

<!DOCTYPE html>
<html>
<head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>CEPODS ...Container Evolution</title>
            <meta name="description" content="CEPODS ...Container Evolution">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="css/style.css">
            <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        </head>
<body>
<div class="wrapper">
            <section class="main-block">
                <h1 class="a-title">about</h1>
                <section class="content-block scroll-pane">
                    <article class="content-post">
                        <div class="info info-1" id="info-1">
                            <p>CEPODS creates commercial &amp; residential environments using shipping containers. Our aim is to create a community of enthusiast with each build of our unique modern designs.</p>
                            <p>CEPODS are seen as efficient and effective pod styled units, when compared to other typical commercial spaces such as brick &amp; mortar, food trucks, tent rentals or temporary (pop-up) stores.</p>
                            <p>CEPODS modern design standards are ideal for anyone interested in operating, marketing, advertising or expanding their presence by using innovative alternative commercial space with shipping containers. The ideal CEPODS clients -are small to large businesses, start-up, pop-up, 2nd store, test retail outlet, and advertising & marketing platforms. Our client base is also expanded to residential and lodging enthusiasts. Many more all welcome.</p>
                            <p>CEPODS expertise is based in architecture, engineering, design/build, real estate, marketing, retail sales and small business management. Our team of professionals shares the same common passion; produce high quality modern design builds.</p>
                            <h1>
                                <a href="#" class="text-btn bio" id="info-2-link" data-info="2">Bio<i class="icon-right-open-gal"></i></a>
                            </h1>
                        </div>

                        <div class="info info-2" id="info-2">
                            <h1>Micro Spaces LLC</h1>
                            <p>Executive Member: <a href="#"class="pop-btn pop-link" data-popup="1">TIMOTHY DUNLAP aka TIAN MAO</a></p>
                            <p>Executive Member: <a href="#"class="pop-btn pop-link" data-popup="2">ANDREW HAGUE II</a></p>
                            <p>Director of Engineering: <a href="#"class="pop-btn pop-link" data-popup="3">RICK DE LA GUARDIA</a></p>
                            <p>Member: <a href="#"class="pop-btn pop-link" data-popup="4">IBRAHIM GREENIDGE</a></p>
                            <h1>
                                <a href="#" class="text-btn bio" id="info-1-link" data-info="1">about<i class="icon-right-open-gal"></i></a>
                            </h1>
                        </div>
                    </article>
                </section>
            </section>
<header>
    <nav>
        <a href="index.php">
            <h1 class="sprites-logo-cepods ir">cepods</h1>
        </a>
        <a href="#" class="mobile-btn ir">menu</a>
        <ul class="main-nav">
            <li>
                <a href="about.php">about</a>
            </li>
            <li>
                <a href="how-we-work.php">how we work</a>
            </li>
            <li class="dropli">
                <a href="design.php">design<i class="icon-right-open-gal"></i></a>
                <ul class="sub-nav">
                    <li>
                        <a href="design-bar.php">bar</a>
                    </li>
                    <li>
                        <a href="design-retail-space.php">retail space</a>
                    </li>
                    <li>
                        <a href="design-restaurant.php">restaurant</a>
                    </li>
                    <li>
                        <a href="design-event-service.php">event service</a>
                    </li>
                    <li>
                        <a href="design-living.php">living</a>
                    </li>
                    <li>
                        <a href="design-custom.php">custom</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="news.php">news</a>
            </li>
            <li>
                <a href="faq.php">faq</a>
            </li>
        </ul>
    </nav>
</header>
</div><!-- END WRAPPER -->
        <footer>
            <div class="wrapper-foot">
                <aside class="vcard">
                    <a href="mailto:info@cepods.com" class="email">info@CEPODS.com</a>
                    <a href="tel:7865201412" class="tel">786-520-1412</a>
                </aside>

                <aside class="company-details">
                    <span>
                       <a href="index.php">MICRO SPACES LLC</a>
                    </span>
                    <h1>cepods ...container evolution<span>®</span></h1>
                </aside>

                <aside class="social-details">
                    <span>
                       <a href="login.php">Login</a>
                       <a href="sign-up.php" class="sign"></a>
                    </span>
                    <ul>
                       <li>
                           <a href="https://www.facebook.com/CEPODSLLC" class="sprites-facebook ir">facebook</a>
                       </li>
                       <li>
                           <a href="https://www.twitter.com/cepods" class="sprites-twitter ir">twitter</a>
                       </li>
                       <li>
                           <a href="https://plus.google.com/117465712196241281498/posts" class="sprites-googleplus ir">google plus</a>
                       </li>
                       <li>
                           <a href="http://www.linkedin.com/company/cepods?goback=%2Enmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&trk=biz-brand-tree-co-name" class="sprites-linkedin ir">linkedin</a>
                       </li>
                       <li>
                           <a href="login.php" class="sprites-youtube ir">youtube</a>
                       </li>
                    </ul>
                </aside>
            </div>
        </footer>
</body>
</html>

enter image description here

100％包装不适用100％的html和正文

0 个答案: