高さ：100％は機能しませんか？

Question

私のコードでheight: 100%を動作させることができません！親divは100％（私は思う）ですので、divを1トン伸ばしてはいけませんか？

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

何の高さを親コンテナに指定されていない場合、それはuslessですのでheight:100%を使用すると、親コンテナの高さの100％を意味します（私たちはあなたのコード内で見ることができるように）。

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>

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>

：

あなたが100VH使うべき画面（read more about viewport units）の完全な高さを持っているために、

それとも、ボディ完全な高さを作り、あまりにもコースで100％を使用することができます。auto`：

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>