Menu
I have simple problem with divs. I would like to create one big div ("container") which cover whole screen and put into it two other divs ("A" and "B"). "A" has 200px height and I would like "B" to cover remaining space like on picture on the left. Below I paste my code but it doesn't work correctly, because "B" is also outside "container" like on picture on the right. Does anyone know how expand "B" to cover remaining space in "container" like on picture on the left? I would be grateful for the answer.
index.html
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
</head>
<body>
<div id="container">
<div id="A">text</div>
<div id="B">text</div>
</div>
</body>
</html>
style.css
#container {
border-color: blue;
width: 100%;
height: 100%;
}
#A {
border-color: green;
height: 200px;
min-height: 200px;
max-height: 200px;
}
#B {
border-color: red;
height: 100%;
overflow: hidden;
}
#A, #B, #container {
border-style: solid;
border-size: 1px;
}
633
You could use the 'conflicting absolute positioning' technique like this:
http://jsfiddle.net/TjArZ/
#container {
border-color: blue;
width: 100%;
position:absolute;
top:0;
bottom:0;
}
#A {
border-color: green;
height: 200px;
}
#B {
border-color: red;
position:absolute;
top:204px;
bottom:0;
left:0;
right:0;
}
#A, #B, #container {
border-style: solid;
border-width: 4px;
}
The basic idea is that the divs are stretched to the coordinates you specify. Background here on ALA.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
