user3870112 user3870112 - 3 months ago 9
CSS Question

A div in absolute position outside the body

I want to see only the half of my div at the end of my page.
I tried to apply a "bottom:-100px" or "margin-bottom:-100px" or "padding-bottom:-100px" but no one works

How can I do ?

Here's my JSFIDDLE : https://jsfiddle.net/cuxyrfh8/6/

div {
background: pink;
position: absolute;
height: 200px;
left: 0;
margin-left: auto;
margin-right: auto;
right: 0;
width: 400px;
border: 5px black solid;
bottom:-100px;
}

Answer

The div is exactly 100px outside of the viewport. I assume you don't want that scrolling behaviour? You can achieve that width overflow: hidden;.

Edit 1: If the body's height is greater than the viewport, you can set position: relative; so that the div's position is orientated on the body.

Edit 2: If you want the halve div on a down scrolled body, you need a wrapper element and apply the overflow and position rules to it.

body {
  margin: 0;
}
.wrapper {
  height: 1000px;
  overflow: hidden;
  position: relative;
}
.wrapper div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}
<div class="wrapper">
  <div></div>
</div>

Comments