无法设置div的高度（％）

Question

所以我有下一个结构：

＆＃13;

＆＃13;

body{ 
	margin:0px;
	background-color:#f2f0f2;
	width:100%;
	height: 100%;
}
.container {
	display: inline-block;
    height:330%;
}
/* ============================================================
   Parallax
============================================================ */

 div.module.content {
	background-color:#f2f0f2;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
	vertical-align: middle;
    height:330%;
}
 div.module.parallax {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background: rgba(25, 25, 25, .5);
	vertical-align: middle;
    text-align: center;
	background-image: url(../img/overlay-pattern.png);
	background-repeat: repeat;
    height:330%;
}

＆＃13;

	<div class="module parallax">
		<div class="container">
			<h1>Lorem Ipsum</h1>
		</div>
	</div>
	<div class="module content">
		<div class="container">
			<p>
	    		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    		</p>
		</div>
	</div>
	
	<div class="module parallax">
	  <div class="container">
	  	 <h1>Lorem Ipsum</h1>
	  </div>
	</div>
	
	<div class="module content">
	  <div class="container">
		<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
		</p>
	  </div>
	</div>
	
	<div class="module parallax">
	  <div class="container">
	  	<h1>Lorem Ipsum</h1>
	  </div>
	</div>
	
	<div class="module content">
	  <div class="container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	  </div>
	</div>

＆＃13;

＆＃13;

＆＃13;

我试图将％的高度设置为％并且它必须正常工作，但它不会，它只接受px或vw，但它不接受％的值。

为什么这样？我该如何解决？

我觉得这是一个非常简单的原因，但我没有看到它。

Answer 1

由于您没有为父元素设置高度，因此无法计算元素的百分比？

设置html { height: 100%; }可让浏览器了解父元素的高度。

html {
  height: 100%;
}

body {
  margin: 0px;
  background-color: #f2f0f2;
  width: 100%;
  height: 100%;
}
.container {
  display: inline-block;
  height: 330%;
}
/* ============================================================
       Parallax
    ============================================================ */

div.module.content {
  background-color: #f2f0f2;
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
  vertical-align: middle;
  height: 330%;
}
div.module.parallax {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background: rgba(25, 25, 25, .5);
  vertical-align: middle;
  text-align: center;
  background-image: url(../img/overlay-pattern.png);
  background-repeat: repeat;
  height: 330%;
}

<div class="module parallax">
  <div class="container">
    <h1>Lorem Ipsum</h1>
  </div>
</div>
<div class="module content">
  <div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

<div class="module parallax">
  <div class="container">
    <h1>Lorem Ipsum</h1>
  </div>
</div>

<div class="module content">
  <div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

<div class="module parallax">
  <div class="container">
    <h1>Lorem Ipsum</h1>
  </div>
</div>

<div class="module content">
  <div class="container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>