身高：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>