DIV container height limited by browser window_问答_开发者

DIV container height limited by browser window

开发者 https://www.devze.com 2023-02-27 03:28 出处：网络

I\'m learning CSS and am having trouble getting my #wrapper DIV to expand to fit it\'s contents. I\'ve made sure that my containers all have 100% height, min-height didn\'t seem to do anything but I d

相关专题：css

I'm learning CSS and am having trouble getting my #wrapper DIV to expand to fit it's contents.

I've made sure that my containers all have 100% height, min-height didn't seem to do anything but I did try that also on both the #wrapper, html and body. Is it something to do with relative vs. absolute positioning? Here's an example of what i'm working on below, any help would be greatly appreciated.

(Updated 4.21.11 by owner)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
    height: 100%;
    clear: both;
}

body {
    margin: 0px;
    padding: 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size: 100%;
    line-height: 1em;
    background-color: #gray;
    background-size: 100%;
    height:100%;
    clear: both;
}

#wrapper {
    margin-right: auto;
    margin-left: auto;
    /*background-color: #FFF;*/
    width: 75%;
    height:100%;
    position: relative;
    clear: both;
}

.screen {
    margin-right: auto;
    margin-left: auto;
    background-color: #3B开发者_StackOverflow6AA0;
    width: 75%;
    height:100%;
    filter: alpha(opacity=20);
    /* CSS3 standard*/
    opacity:0.20;
    z-index: -100;
    position: absolute;
    left: 12%;
    right: 12%;
    clear: both;
}

.overlay {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    height:100%;
    z-index: 100;
    position: absolute;
    left: 12%;
    right: 12%;
    padding: 0px;
    clear: both;
}

#textArea {
    height: auto;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
}
</style>

</head>
<body>

    <div id="wrapper">
    <div class="screen"></div>
        <div class="overlay">
            <div id="textArea">
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            </div>
        </div>
    </div> 

</body>
</html>

For a container div, it is generally better to leave off the height property (unless you want to limit it for a specific reason). That will allow the height to expand as needed.

the 100% property means that it's going to fit on the parent's body.

check this out http://cssbeauty.com/skillshare/discussion/30/100-width-and-height/

Your link is down, but it looks like if you add overflow:hidden; to your #wrapper, you'll get the desired effect.

Just keep in mind that absolute positioning removes the element from the natural flow of the document, so you'll need to consider how each item's content may overflow its container.