Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand div vertically

Tags:

html

css

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.

What I want to getResult produced by my code

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;   
}
like image 633
mchrobok Avatar asked Oct 06 '22 02:10

mchrobok


1 Answers

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.

like image 59
James Smith Avatar answered Oct 12 '22 21:10

James Smith