CODEWITHSUNDEEP
htmlcss
supersize
supersize

Reputation: 14773

div with 100% height behaviour on scrolling body

I'm having a simple div with a height of 100%

#stripe {
  height: 100%;
  width: 150px;
  background-color: red;
  position: absolute;
  left: 100px;
}

when I'm adjusting the browser height, it always goes from top to bottom as expected. Problem is when the body height has a scroll due to its content, and I'm scrolling down, the div ends.

Is it possible to stop this behaviour and make the div always height: 100% on scrolling with css only.

FIDDLE

Upvotes: 0

Views: 134

Answers (3)

Anonymous
Anonymous

Reputation: 10216

Use position: absolute; with your <body> tag. - DEMO

body {
    height: 1000px;
    position: absolute;
}

#stripe {
    height: 100%;
    width: 150px;
    background-color: red;
    position: absolute;
    left: 100px;
}

Upvotes: 4

Benjamin
Benjamin

Reputation: 2670

Remove 'position: absolute;' and change position:relative

#stripe {
    height: 100%;
    width: 150px;
    background-color: red;
    left: 100px;
}

DEMO

Upvotes: 2

Dan
Dan

Reputation: 9468

Remove position: absolute; and change left to margin-left

#stripe {
    height: 100%;
    width: 150px;
    background-color: red;
    margin-left: 100px;
}

JS Fiddle Demo

Upvotes: 1

Related Questions