Clever Geek Handbook

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

I have this pattern in my mind

enter image description here

And I don't know how I can implement the second "elastic div". It should fill with its height all the remaining space on the screen (no more, because I don't want to see the y-scroll). Is it possible?

+3


source to share


5 answers


viewport units

and calc

make it easier.

* {
  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>
Run codeHide result




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>
Run codeHide result


+3


source


Take a look at the fiddle . Hope this 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;
}
+1


source


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

0


source


You say you want to "stretch" the second div my example shows.

.firstDiv {
    height: 400px;
}

.secondDiv {
    height: 100%;
}

The second div needs to have content in it or it won't be visible, however its height will be defining to what is inside the div, so it will stretch as needed.

0


source 


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

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


source






More articles:


All Articles