0

how can i get:

  • div-Window which height can be random
  • div-header with CONST height (30px)
  • div-content that fills the rest of div-Window

sth like in the asci-sketch below:

+-divWindow------+
|+--divHeader---+|
||              ||
|+--------------+|
|+--divContent--+|
||              ||
||              ||
||              ||
||              ||
|+--------------+|
+----------------+

This is what i get so far:

#divWindow{
    position: absolute;
    bottom: 80px;right: 40px;
    width: 400px; height: 500px;
    background-color: red;
    border: 1px solid grey;
    border-radius: 15px;
    overflow: hidden;
}
#divHeader{
    position: absolute;
    left: 0; right: 0; top: 0; */
    height: 15px;
    padding: 5px 10px 5px 10px;
    background-color: blue;
    float: bottom;}
#divContent{
    background-color: green;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    padding: 5px 10px;
}

but divContent does not fill whole left space

Nicolas Roehm
  • 688
  • 1
  • 8
  • 15
pi.314
  • 622
  • 5
  • 16
  • You can achieve this with the `vh` unit in CSS. See following example : #divWindow { height: 100vh; } #divHeader { height: 30px; } #divContent { height: calc(100vh - 30px); } – Nicolas Roehm Dec 13 '18 at 14:49
  • If you use my flex answer from the duplicate, the footer is optional (before you say this is not a duplicate because that has a footer) – Pete Dec 13 '18 at 14:50
  • Here is an example using CSS `grid layout` -> http://jsfiddle.net/p1bjh76o/ – Morpheus Dec 13 '18 at 14:52

0 Answers0