CODEWITHSUNDEEP
htmlcss
user3511714
user3511714

Reputation: 11

Stretch div size to the bottom of the page

I'm trying to create my first web page. But I have a problem, I searched a lot about it but I still cannot solve it. So, the problem is, that my div (which is something like a background for the left side of the page, it has no content, only coloured background) is not stretching to the bottom of the page, it just stretches to the bottom of the screen, so when I scroll down the div is missing from there. It looks like this (http://postimg.org/image/aiiabtue1/)

HTML:

<body>   
    <div class="left_strip"></div>
</body>

CSS:

.left_strip {
    position: absolute;
    left: 50%;
    width: 203px;
    height: 100%;
    top: 158px;
    background: rgb(251, 236, 236);
    margin-left: -500px;
}

Upvotes: 1

Views: 1956

Answers (2)

Michael Lawton
Michael Lawton

Reputation: 1510

Use position: relative on the body tag and bottom: 0 instead of height: 100% on the .left_strip.

With just position: relative on the body tag the element will be 100% height, but because of the 158px distance from the top the bottom will be 158px below the content.

bottom: 0 will fix the bottom of the element to the bottom of the closest "positioned" (relative, absolute, fixed) parent element.

body {
    position: relative;
}
.left_strip {
    position:absolute;
    width:203px;
    top: 158px;
    bottom: 0;
    background-color: blue;
}
.content {
    height: 2000px;
    background-color: red;
    margin-left: 250px;
}
<div class="content"></div>
<div class="left_strip">Test content</div>

Upvotes: 3

AmperPil
AmperPil

Reputation: 31

Instead of using % try using the exact pixel value of the body tag.
What also might help is using a % value that is higher than 100, this also seems to work in testing.

Upvotes: 0

Related Questions