CODEWITHSUNDEEP
htmlcss
k.makarov
k.makarov

Reputation: 854

Fixed height div + strechy height div = 100% screen height. Is it possible?

I have this template in my mind

enter image description here

And i dont know how i can implement second "stretchy div". It must fill with his height all remaining space on the screen (not bigger, because I don`t want to see y-scroll). Is it possible?

Upvotes: 3

Views: 511

Answers (5)

Paulie_D
Paulie_D

Reputation: 115288

viewport units and calc make this simpler.

* {
  margin: 0;
  padding: 0;
}
.one {
  height: 50px; /* demo height */
  background: red;
}
.two {
  height: calc(100vh - 50px);
  background: blue;
}
<div class="one"></div>
<div class="two"></div>

EDIT: Flexbox version

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.one {
  height: 50px;
  background: red;
}
.two {
  background: blue;
  flex-grow: 1;
}
<div class="one"></div>
<div class="two"></div>

Upvotes: 3

Ankur Mishra
Ankur Mishra

Reputation: 51

Check out this fiddle. Hope it helps!

HTML - 

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS - 

html, body {
    width:100%;
    height:100%;
    margin:0;
}
#wrapper {
    width:300px;
    height:100%;
    position:relative;
}
#first {
    width:300px;
    height:200px;
    background-color:#F5DEB3;
}
#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

Upvotes: 1

joshnik
joshnik

Reputation: 482

.div1{
height:400px;
z-index:1;
}

.div2{
height:100%;
position:relative;
top:-400px;
z-index:-1;
}

Upvotes: 0

Lansana Camara
Lansana Camara

Reputation: 9873

You say you want a "stretchy" second div, which my example shows.

.firstDiv {
    height: 400px;
}

.secondDiv {
    height: 100%;
}

The second div must have content in it or it will not be seen, however the height of it will be determinant on what is inside the div, so it will stretch as you need.

Upvotes: 0

Varatharaj
Varatharaj

Reputation: 687

use resize event of javascript window object.Listen for this event then we have to update our visual elements(div..etc) manually.

Upvotes: 0

Related Questions