0

  • I somehow lost track of what I am doing wrong here:

  • I got a simple content <div>.

  • it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.

  • the parent element is the body with height set to 100vh. No margins, no paddings.

  • However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?

I put a minimal example here to show what I mean: https://jsfiddle.net/kemo8npa/4/

Can someone explain to me, why i get the scrollbar?

html {
    margin: 0;
    padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: purple;
}

.content {
  height: calc(100% - 30px);
  margin-top: 30px;
  background-color: blue;
  width: 300px;
}
<div class="content">
  content
</div>

edit: changed example to be more minimal.

Monkeyphant
  • 105
  • 1
  • 5

1 Answers1

0

The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.

You could use padding-top instead.

henningw
  • 31
  • 2
  • Thanks for the reply, but that's kind of my point: margin + height add up to 100%, so there should not be a scrollbar. The header is `position: fixed`, meaning it should be out of the layout flow and not add anything to it. I made a more stripped down example that shows what I do not understand here: https://jsfiddle.net/kemo8npa/4/ Why do I get the scrollbar? O.o – Monkeyphant Oct 07 '22 at 09:16