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

  • Z时代
  • 2024-01-10
  • 分类：问答

我不能让height: 100%与我的代码一起工作！母公司div是100％（我认为），所以不应该将股利延伸一吨？身高：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>

回答：

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

以上是 身高：100％无法正常工作？ 的全部内容， 来源链接： utcz.com/qa/265478.html

回到顶部