How to make div scale vertically all the way down?

后端未结

关注

 7  718

I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to ha

相关标签:

7条回答

北海茫月

2020-12-31 23:34

The key is to have a set height on the parent container. Then the height:100% works

<!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>Divs</title>
<style type="text/css" media="all">
#main {
    height:30em;
    width:30em;
    background-color:#999999;
    padding:1em 1em 0px 1em;
}
.inner {
    width:5em;
}
#blue {
    float:right;
    background-color:#0000FF;
    height:100%;
}
#magenta {
    float:left;
    background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
    <div class="inner" id="blue">
        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
    </div>
    <div class="inner" id="magenta">
        1<br/>2<br/>3<br/>4<br/>5<br/>6
    </div>
</div>
</body>
</html>

0 讨论(0)

上一页 1 2