Question

我无法让height: 100%使用我的代码！父母div是100％（我认为）所以不应该把div拉长一吨？

P.S我知道它会很难看，我只是想让它现在起作用。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 1

使用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>

要拥有完整的屏幕高度，您应该使用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>

身高：100％不工作？

1 个答案: