身高：100％无法正常工作？

Question

我不能让height: 100%与我的代码一起工作！母公司div是100％（我认为），所以不应该将股利延伸一吨？

P.S我知道它会很丑，我只是想让它现在工作。

.featuredCourse { 
 
    width: 35%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
}

<div class="courses"> 
 
    <div class="featuredCourse"> 
 
    <img src="images/featuredcourse.jpg" alt="featuredcourse"> 
 
    <h1 class="featuredCourseTitle">JavaScript in 4 weeks</h1> 
 
    <p class="featuredCourseDesc">Learn the most popular web programming language in a months time</p> 
 
    </div> 
 
</div>

Answer 1

使用height:100%意味着父容器高度的100％，因此，如果在父容器中没有指定高度是usless （我们可以在代码中看到）。

添加一个高度courses和你也必须指定courses高度应该如何表现（固定值，视口的100％等），它应该工作：

.courses { 
 
    height:500px; /* Or any other value different from the default one (auto)*/ 
 
} 
 

 
.featuredCourse { 
 
    width: 35%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
}

<div class="courses"> 
 
    <div class="featuredCourse"> 
 
    <img src="images/featuredcourse.jpg" alt="featuredcourse"> 
 
    <h1 class="featuredCourseTitle">JavaScript in 4 weeks</h1> 
 
    <p class="featuredCourseDesc">Learn the most popular web programming language in a months time</p> 
 
    </div> 
 
</div>

有你应该使用100vh屏幕（read more about viewport units）的全高：

body { 
 
margin:0; 
 
} 
 

 
.courses { 
 
    height:100vh; 
 
} 
 

 
.featuredCourse { 
 
    width: 35%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
}

<div class="courses"> 
 
    <div class="featuredCourse"> 
 
    <img src="images/featuredcourse.jpg" alt="featuredcourse"> 
 
    <h1 class="featuredCourseTitle">JavaScript in 4 weeks</h1> 
 
    <p class="featuredCourseDesc">Learn the most popular web programming language in a months time</p> 
 
    </div> 
 
</div>

或者你也可以让身体充分的高度，并与课程100％使用过：

body { 
 
    margin: 0; 
 
    height: 100vh; /* full screen height*/ 
 
} 
 

 
.courses { 
 
    height: 100%; /* 100% of the body height = full screen height */ 
 
} 
 

 
.featuredCourse { 
 
    width: 35%; 
 
    height: 100%; /* 100% of the courses height = full screen height*/ 
 
    margin: 0 auto; 
 
    background-color: white; 
 
    -webkit-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.75); 
 
}

<div class="courses"> 
 
    <div class="featuredCourse"> 
 
    <img src="images/featuredcourse.jpg" alt="featuredcourse"> 
 
    <h1 class="featuredCourseTitle">JavaScript in 4 weeks</h1> 
 
    <p class="featuredCourseDesc">Learn the most popular web programming language in a months time</p> 
 
    </div> 
 
</div>