我提前道歉提出一个问题，之前已经回答了一千次，但经过一个小时的研究后我还没找到问题的答案。
我希望我的一部分高度为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％高度的建议。
答案 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%;"
答案 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';