Question 44065 in Html Question posted in
Some basic documentation can be found here.

How to let a element full screen completely that can scroll? – Html

I am trying to make a website that full the page with one color at the beginning part of the website, and when you scroll down, you will see different parts with different colors.
However, this code is not working and I can not scroll down.

I searched the internet and I found This. However, the CSS solution will leave a white part on the left, so I changed the code, but the current problem occurs.

.MAX{
  width: 100vw;
  height: 100vh;
  left:0px;
  margin:0px;
  padding: 0px;
  position:absolute;
}
<div class="MAX" style="background:red;">
</div>
<p>
  I can not be shown
</p>

I want a CSS-only solution because I know little about Javascript.

Tags:

2

Answers


  1. 0

    You are using position: absolute; and that’s why you cannot see the p element, position: relative; will give you your desired results

    .MAX{
  width: 100vw;
  height: 100vh;
  left:0px;
  margin:0px;
  padding: 0px;
  position:relative;
}
    Login or Signup to reply.
  2. 0

    Since you mentioned wanting multiple sections, each with a different color, I’ll throw this out there too, as a simple example that you could build upon

    section:nth-child(even){
  background-color: teal;
}

section:nth-child(odd){
  background-color: lavender;
}

section{
  height: 100vh;
  padding: 50px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    <section>
  Part 1
</section>
<section>
  Part 2
</section>
<section>
  Part 3
</section>
<section>
  Part 4
</section>
<section>
  Part 5
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search