如何在100%高度的img下制作其他元素?

时间:2019-09-19 07:00:32

标签: html css

因此,我一周前开始学习HTML,CSS,然后尝试制作一个只有一页的网站,该页面最初具有“主视图”,然后如果您滚动页面,您会在这里看到公司工作的其他详细信息我正在尝试做的事情:1表示您进入网站时的第一个视图,2表示您稍微向下滚动后的视图,第三个表示您滚动 The 1 means the first view when you enter the website, the 2 means after you roll down a little bit and the third is the end of the page after you roll后的页面末尾,  我尝试使用:

margin-bottom: -150px;

但是它变得非常混乱,并让我感觉我在做一些不专业的事情,因为如果我要构建一个较长的页面,它将在-900px左右结束,希望您能提出我的问题,否则我会尝试解释得更好。

预先感谢, 丹尼尔。

2 个答案:

答案 0 :(得分:1)

您可以根据自己的情况尝试

.main-page {
  background-color: #000;
}

.first,
.second,
.third {
  width: 400px;
  height: 100vh;
  margin: 0 auto;
  font-size: 36px;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

.third {
  background-color: yellow;
}
<div class="main-page">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
</div>

答案 1 :(得分:0)

基于我的评论。

如果这是预期的行为,则可以通过将容器的高度设置为height: 100vh来实现。正如我在评论中提到的那样,请确保肯定,包括更多的代码和更清晰的解释。