div margin and position absolute

Question

Look at this example = https://codepen.io/anon/pen/zaXMXo

* {
  box-sizing: border-box;
}
html, body {
  height: 100%
}
.wrapper {
  background: red;
  min-height: 100%;
}
.left {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  background: yellow;
}
.content {
  background: blue;
  margin-left: 230px;
  margin-top: 30px;
  width: 300px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="content">
            hello content <br />
            hello content <br />
            hello content <br />
            ...
   </div>
 </div>

Can someone tell me:

1) why yellow block not at full height?

2) why blue block margin-top add white space on top?

how fix it?

1. you put yellow top:0 and bottom:0 at initial viewport so the height is correct. 2. because it has a margin-top and read the rule on collapsing margins: https://www.w3.org/TR/CSS2/box.html#collapsing-margins — Timmetje, Jul 04 '18 at 09:58
.left yellow block is in absolute position, related to the body. So the top and bottom match to the viewport height. However, if you want a height related to the content of `.wrapper`, you need to set it in `position: relative` so the yellow block top and bottom will match the content height — PIIANTOM, Jul 04 '18 at 10:12
@PIIANTOM no related to body but related to viewport ... you may notice the margin-collpasing is make the margin going to the body, so it was related to body it will be shifted — Temani Afif, Jul 04 '18 at 10:23
@TemaniAfif, you are right. A shame I can not edit my previous comment anymore — PIIANTOM, Jul 04 '18 at 10:41

dfsq · Accepted Answer · 2018-07-04T09:59:01.797

3

1) why yellow block not at full height?

It is, it's just due to second problem it looks like it's not.

2) why blue block margin-top add white space on top?

This is due to collapsing margins, because wrapper container doesn't have any top margin or padding (nor border-top) so it merges with the top margin from .content child. You could set padding-top, or border-top on .wrapper to mitigate this.

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0; /* always good to clean padding and margin on html/body */
  margin: 0;
  height: 100%
}

.wrapper {
  background: red;
  min-height: 100%;
  border-top: 1px green solid; /* border fixes margin collapsing */
}

.left {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  background: yellow;
}

.content {
  background: blue;
  margin-left: 230px;
  margin-top: 30px;
  width: 300px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="content">
            hello content <br />
            hello content <br />
            hello content <br />
            ...
   </div>
 </div>

edited Jul 04 '18 at 09:59

answered Jul 04 '18 at 09:55

dfsq

191,768
25
236
258

A green border does not seem like a nice solution. How about adding `overflow: auto` to the `wrapper` instead? – Tobias Geiselmann Jul 04 '18 at 09:58
I would start explaining the second one and say that the margin-collapsing will make the margin goes to the body so this one is creating the overflow and the second is positioned relatively to viewport (since there is no position:relative somehwere) – Temani Afif Jul 04 '18 at 09:58
@TobiasGeiselmann `border` is just an example, it can be `transparent` too. `overflow` is also possible. There are number of fixes for this but all of them have their pros and cons. I usually don't like messing with overflowing, but it would also work. – dfsq Jul 04 '18 at 10:00
@TemaniAfif Indeed, it's a good explanation. – dfsq Jul 04 '18 at 10:02
Ok about point 2, which has a lot of various fixes (and has already answered many times).. Though, the answer is incomplete regarding point 1 (and thus, not fixed) – PIIANTOM Jul 04 '18 at 10:03
True, `overflow: auto` can cause scrollbars to appear in the parent element, rather than letting overflow content overflow as per `overflow: visible`. In the end using padding to make space between parent and child is the ideal choice. Bootstrap uses a lot of `before:` content fixes. – Timmetje Jul 04 '18 at 10:04

score 0 · Answer 2 · edited Jul 04 '18 at 10:16

You gave yellow div it a position absoulute wich make the div stack in this part of screen and the blue div margin-top to so it pushed the body to bottom.

This is why you see the white part at the top and yellow part not in the full height

add margin:0 to body to delete white spaces in corners so update your code to be:

html,
body {
    height: 100%;
    margin: 0;
}
.left {
    width: 200px;
    top: 0;
    position: absolute;
    bottom: 0;
    background: yellow;
    height: 100%;
}
.content {
    background: blue;
    margin-left: 230px;
    width: 300px;
}

div margin and position absolute

2 Answers2