在100%高度部分周围添加元素时,高度100%无法正常工作

时间:2014-08-19 10:39:12

标签: html css

我提前道歉提出一个问题,之前已经回答了一千次,但经过一个小时的研究后我还没找到问题的答案。

我希望我的一部分高度为100%。如果我只使用此代码,它可以完全正常,证明:http://jsfiddle.net/8m33jafw/

<section id="section-headline">
    <div id="frontpage" class="text-center">
        <div class="col-xs-12">
            <h1 class="">We create Yada yada yada</h1>
        </div>

        <div class="col-xs-12 cta-email">
            <form action="" method="POST" class="form-inline" role="form">

                <div class="form-group">
                    <input type="email" class="form-control input-md" id="" placeholder="Write your best Email here.">
                </div>

                <button type="submit" class="btn btn-md cta-green">Invite me to Beta!</button>
            </form>
            <div class="text-center">We <i class="fa fa-heart"></i> privacy</div>
        </div>


        <div id="icon-arrow" class="wow bounce icon-arrow" data-wow-iteration="3" data-wow-delay="2s">
            <i class="fa fa-angle-double-down fa-3x"></i>
        </div>
    </div>
</section>

<section id="section-subheadline">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h2>Let us stay in Touch!</h2>
                <img src="images/icons/twitter.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.0s">

                <img src="images/icons/google+.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.3s">

                <img src="images/icons/youtube.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.6s">

                <img src="images/icons/fb.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.9s">
            </div>
            <div class="col-sm-8">
                <h2>Subheadline with text</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quam, quod facere, ipsam enim molestiae magnam! Pariatur vitae, doloribus aperiam.</p>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem omnis, corporis suscipit odio vitae consequatur alias asperiores eligendi beatae tempore.</p>
                    </li>
                    <li>
                        <p>Suscipit modi quae earum tempora cum magnam enim eligendi necessitatibus, dicta, odio quia expedita corrupti tenetur voluptatem eius, numquam. Sit.</p>
                    </li>
                    <li>
                        <p>Quia excepturi, dolor nihil ut! Nostrum nisi commodi odit hic dicta maiores in asperiores iste obcaecati. Ex in, qui impedit.</p>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</section>

但是在我添加了一些元素之后,标记会中断。证明:http://jsfiddle.net/8m33jafw/1/

<div id="content" class="site-content">
    <div id="page" class="hfeed site">
        <div id="primary" class="content-area">
            <main id="main" class="site-main">
                <article id="post-4" class="post-4">
                    <div class="entry-content">

                        <section id="section-headline">
                            <div id="frontpage" class="text-center">
                                <div class="col-xs-12">
                                    <h1 class="">We create the most transparent foundation there will ever be!</h1>
                                </div>

                                <div class="col-xs-12 cta-email">
                                    <form action="" method="POST" class="form-inline" role="form">

                                        <div class="form-group">
                                            <input type="email" class="form-control input-md" id="" placeholder="Write your best Email here.">
                                        </div>

                                        <button type="submit" class="btn btn-md cta-green">Invite me to Beta!</button>
                                    </form>
                                    <div class="text-center">We <i class="fa fa-heart"></i> privacy</div>
                                </div>


                                <div id="icon-arrow" class="wow bounce icon-arrow" data-wow-iteration="3" data-wow-delay="2s">
                                    <i class="fa fa-angle-double-down fa-3x"></i>
                                </div>
                            </div>
                        </section>

                        <section id="section-subheadline">
                            <div class="container">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h2>Let us stay in Touch!</h2>
                                        <img src="images/icons/twitter.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.0s">

                                        <img src="images/icons/google+.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.3s">

                                        <img src="images/icons/youtube.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.6s">

                                        <img src="images/icons/fb.png" alt="" class="icon-socialmedia wow rotateIn" data-wow-delay="1.9s">
                                    </div>
                                    <div class="col-sm-8">
                                        <h2>Subheadline with text</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quam, quod facere, ipsam enim molestiae magnam! Pariatur vitae, doloribus aperiam.</p>
                                        <ul>
                                            <li>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem omnis, corporis suscipit odio vitae consequatur alias asperiores eligendi beatae tempore.</p>
                                            </li>
                                            <li>
                                                <p>Suscipit modi quae earum tempora cum magnam enim eligendi necessitatibus, dicta, odio quia expedita corrupti tenetur voluptatem eius, numquam. Sit.</p>
                                            </li>
                                            <li>
                                                <p>Quia excepturi, dolor nihil ut! Nostrum nisi commodi odit hic dicta maiores in asperiores iste obcaecati. Ex in, qui impedit.</p>
                                            </li>
                                        </ul>

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </article>
            </main>
        </div>
    </div>
</div>

我将不胜感激任何帮助。非常感谢,这是我正在使用的CSS:

  html, body {
  height: 100%;
  }


nav.navbar.navbar-default {
  margin-bottom: 0px; }

section#section-headline {
  position: relative;
  height: 100%;
  background: url(http://2.bp.blogspot.com/-umgX2re73D4/UNJ8G_cQyQI/AAAAAAAAAPQ/eNACZypGlFQ/s1600/white-daisy-in-sunlight-wallpapers_1440x900.jpg) no-repeat center center;
  background-size: cover;
  background-color: #fff; }
  section#section-headline #frontpage h1 {
    padding-top: 10%;
    color: #8BC343;
    font-size: 5.79vw;
    font-family: 'Gafata', sans-serif; }
  section#section-headline #frontpage .cta-email {
    padding-top: 50px; }
  section#section-headline #frontpage .form-inline .form-control, section#section-headline #frontpage .form-inline .navbar-form, section#section-headline #frontpage .form-inline .navbar-form, section#section-headline #frontpage .form-inline .navbar-form {
    min-width: 250px; }
  section#section-headline #icon-arrow {
    position: absolute;
    bottom: 10px;
    left: 50%; }

section#section-subheadline {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #fff; }
  section#section-subheadline img {
    height: 80px;
    width: 80px;
    margin: 20px; }

不幸的是我必须考虑那些html元素。所以请给我关于如何在第一部分获得100%高度的建议。

3 个答案:

答案 0 :(得分:3)

我刚刚更改了你的css中的一行:

section#section-headline
{
    height:100vh;
}

无论内容是什么,这都会使您的部分成为视口的高度。

这是 updated fiddle

请注意,IE8及更早版本不支持此功能,有关支持的浏览器检出this link的完整列表。

希望这有帮助。

答案 1 :(得分:1)

这是 Fiddle Demo

我在这里添加了CSS的和平

{
    height:100%;
    width:100%;
    display: table;

}

并将.entry-content样式的父标记设置为style="height: 100%;"

全屏

Demo

答案 2 :(得分:0)

100%的高度是相对于父容器的。如果您的父容器超出窗口高度,子容器的高度也将超出。

我知道你希望你的section-header具有视口高度。您有两种选择:i)将嵌套标题分离为独立形式(如在您的第一个小提琴中)或ii)如果您无法更改包装div,因为您有一个唯一的标识符,您想要更改高度,您可以使用jQuery或javascript:

解决此问题

<强> JQuery的:

$('#section-headline').height($(window).height());

在这里小提琴:http://jsfiddle.net/8m33jafw/3/

<强>使用Javascript:

document.getElementById('section-headline').style.height = window.screen.availHeight + 'px';

在这里小提琴:http://jsfiddle.net/8m33jafw/5/