CODEWITHSUNDEEP
htmlcss
lawx
lawx

Reputation: 388

Make div stretch to height of content, not height of page

I have a div with a 100% height:

height: 100%;

Plus I added an absolute position:

position: absolute;

When I added the absolute position property, the div stretches to the height of the page instead of the height of the content inside it like before. How can I make it so the div stretches to the height of the content, not the page?

Here is the full code if that helps at all:

.blah {
    height: 100%;
    width: 200px;
    position: absolute; 
    border-radius: 15px 15px 15px 15px; 
    -moz-border-radius: 15px 15px 15px 15px; 
    -webkit-border-radius: 15px 15px 15px 15px; 
    border: 0px solid .800000;
    padding: 0.5em;
    background-color: #ffffff;
    -webkit-box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}

Upvotes: 0

Views: 2725

Answers (1)

Matanya
Matanya

Reputation: 6346

just don't use height:100% and the height will be automatically adjusted to the content.

The behaviour you describe stems from the fact that the parent element - according to which the 100% are determined - becomes the body element once you assign position:absolute; (assuming you didn't position other parent elements of that DIV).

Upvotes: 2

Related Questions