1+1>2 problem - bottom,top,height dimensions don't add up on several divs:

[joshun]

It is simple as this:

Two bars on top,

then content window,

then one foot bar followed by a logger window at the bottom.

I want the 5 div's height all together add up to 100vh - meaning there will be no scrollbar on the right side of a browser.

So I arranged each div's dimension by a constant or a variable:

body{
    --ftheight: 6.5em;
    --navheight: 1.5em;}

#header{height: 1.5em;}

#nav{height: var(--navheight);}

#main{    
      top: calc( 1.5em + var(--navheight) );
      bottom: var(--ftheight);}

#footer{
    bottom: 0;
    height:  var(--ftheight);}

  #footbar{height: 1.5em;}
  #logger{height:inherit;}

I played a lot of combinations, position:relative, position:absolute, position:fixed, but All of them result in an overflow total with a browser scrollbar, or two bars with one at the bottom!

I also tried flexbox, with flex-grow:none and flex-grow:1, which did not work either.

So in the world of CSS, 1+1>2!

common.css two_sections.html

[Ingolme]

Here, I've updated the code to use flexboxes. Replace your CSS file with this.

The part that was causing trouble was the logger, because it needs to fit properly within the height of the footer at the same time that the footer has to fit in to body, so they each need their own flexbox arrangement.

*{
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

html, body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}


body{
    --hdheight: 1.5em;
    --navheight: 1.5em;
    --ftheight: 6.5em;
    --wth: 40em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#header{
    font-weight: 600;
    height: var(--hdheight);
    background-color:yellow;
    flex: 0 0 auto;
}

#nav{
    height: var(--navheight);  
    background-color:greenyellow;
    flex: 0 0 auto;
}

#main{
    overflow: auto;
    flex: 1 1 auto;
    height: 100%;
}


#footer{
    height: var(--ftheight);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#footbar{
    width: inherit;
    height: 1.5em;
    text-align:center;
    background-color:forestgreen;
    flex: 0 0 auto;
}
    
#logger{
    background-color: #111;
    color:antiquewhite;
    overflow: auto;
    height: 100%;
    flex: 1 1 auto;
}  

button{
    background-color:coral;
    border-color: coral; 
    border-radius:0.5em;
    
    box-shadow: 0.2em 0.2em #ccc;
    text-indent: 0.25em;
    vertical-align: middle;
}

.btn{
    display: inline;
    background-color:antiquewhite;
    border-color:beige;
    border-radius:0.25em;    
    box-shadow:none;
    
    text-indent:0;
    font-weight:500;
    height: 1.5em;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 0.25em;
    
}


 .inputbox, .outputbox{           
      width: var(--wth);
      padding: 0.5rem;
      margin:0rem 0rem 0.5rem 0rem;         
  }

  .inputbox{
      border:1px solid black;
      border-radius:0.25rem
  }    
  .outputbox{
      background-color:darkblue; 
      border:medium dashed chocolate;
      color:bisque;      
  }

 

[joshun]

On 4/19/2024 at 7:16 AM, Ingolme said:

Here, I've updated the code to use flexboxes. Replace your CSS file with this.

The part that was causing trouble was the logger, because it needs to fit properly within the height of the footer at the same time that the footer has to fit in to body, so they each need their own flexbox arrangement.

*{
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

html, body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}


body{
    --hdheight: 1.5em;
    --navheight: 1.5em;
    --ftheight: 6.5em;
    --wth: 40em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#header{
    font-weight: 600;
    height: var(--hdheight);
    background-color:yellow;
    flex: 0 0 auto;
}

#nav{
    height: var(--navheight);  
    background-color:greenyellow;
    flex: 0 0 auto;
}

#main{
    overflow: auto;
    flex: 1 1 auto;
    height: 100%;
}


#footer{
    height: var(--ftheight);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#footbar{
    width: inherit;
    height: 1.5em;
    text-align:center;
    background-color:forestgreen;
    flex: 0 0 auto;
}
    
#logger{
    background-color: #111;
    color:antiquewhite;
    overflow: auto;
    height: 100%;
    flex: 1 1 auto;
}  

button{
    background-color:coral;
    border-color: coral; 
    border-radius:0.5em;
    
    box-shadow: 0.2em 0.2em #ccc;
    text-indent: 0.25em;
    vertical-align: middle;
}

.btn{
    display: inline;
    background-color:antiquewhite;
    border-color:beige;
    border-radius:0.25em;    
    box-shadow:none;
    
    text-indent:0;
    font-weight:500;
    height: 1.5em;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 0.25em;
    
}


 .inputbox, .outputbox{           
      width: var(--wth);
      padding: 0.5rem;
      margin:0rem 0rem 0.5rem 0rem;         
  }

  .inputbox{
      border:1px solid black;
      border-radius:0.25rem
  }    
  .outputbox{
      background-color:darkblue; 
      border:medium dashed chocolate;
      color:bisque;      
  }

 

That is awesome! I tried another approach - delete the footer framework and align footbar and logger with the first 3 divs, each with absolute position on where is top and where is bottom, problem also solved.