简体   繁体   中英

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);
}

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).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM