CSS layout - dynamic column content determines the size of the wrapper

Question

Party,
I struggle with the layout (I always struggle with CSS, curse it to a special kind of hell!). I simplified everything I could and created a plunger . I follow the following ...

• Content to the full height of the viewport.
• Fixed height <header>and <footer>s width: 100%.
• <footer> installed at the bottom of the viewport.
• The rest of the space between the two columns — Col A — is a fixed width, Col B fills the remainder of the width of the viewport and both versions height: 100%.
• Col B contains a <canvas>, which is centered horizontally.

This is the layout for the Angular application I'm working on, and the contents of Col A are created based on the data in the application, so the height will always change. I want it to <footer>be pressed if Col A reaches a height greater than the viewport, but otherwise <footer>must remain on bottom: 0.

In my example, you see that it is <footer>stuck at the bottom, but if you reduce the height of the viewport, it will eventually block <canvas>. I want the same thing to happen with the contents of Col A on the left. As elements are added, I want to <footer>click, if necessary, and if the viewport is compressed, I want the contents of Col A to block <footer>.

Col ​​A position: absolute, , relative, ( ). , . , , - , .

, . , .

Answer 1

. flexbox flex-grow: 1, - , .

html {
  height: 100%;
}
html, body, #page-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0;
}
#page-wrapper {
  flex-direction: row;
  background-color: #ff6900;
}
header {
  background-color: #9b9b9b;
  height: 40px;
}
#ui-wrapper {
  background-color: #00ff00;
  width: 120px;
}
.filler {
  background-color: gold;
  height: 50px;
  border-bottom: 3px double;
}
#display-wrapper {
  margin-top: 40px;
  flex-grow: 1;
}
canvas {
  display: block;
  border: solid 1px red;
  margin: 0 auto;
}
footer {
  background-color: #8e8e8e;
}

<header>Header</header>
<div id="page-wrapper">
  <div id="ui-wrapper">
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
    <div class="filler">x</div>
  </div>
  <div id="display-wrapper">
    <canvas width="300px" height="300px"></canvas>
  </div>
</div>
<footer>Footer</footer>

Hide result

Answer 2

, Head-Body-Foot Left-Main-Right. , paddings ( , ). , .

Fiddle: https://jsfiddle.net/javierrey/t8a74d93/11/

HTML:

<div class="lay">
  <div class="lay-head">
    <div class="lay-main">
    Header
    </div>
  </div>
  <div class="lay-body">
    <div class="lay-left">
    Left
    </div>
    <div class="lay-right">
    </div>
    <div class="lay-main">
      <canvas class="content">
      </canvas>
    </div>
  </div>
  <div class="lay-foot">
    <div class="lay-main">
    Footer
    </div>
  </div>
</div>

CSS

/* General default (Bootstrap compatible) */

html, body {width: 100%; height: 100%;}
body {margin: 0; overflow-x: hidden; overflow-y: auto; background-color: #ffffff;}
body, input, textarea, keygen, select, button {color: #555555;}
* {box-sizing: border-box; font-family: sans-serif; font-size: 14px;}
*:focus {outline: 0;}
a {text-decoration: none;}
textarea {resize: none; overflow: auto;}

/* Default Layout */

.lay {position: relative; overflow: hidden; height: 100%;}
.lay-head {position: absolute; overflow: hidden; top: 0; width: 100%; height: 0;}
.lay-foot {position: absolute; overflow: hidden; bottom: 0; width: 100%; height: 0;}
.lay-body {overflow: hidden; width: 100%; height: 100%; padding-top: 0; padding-bottom: 0;}
.lay-left {overflow: hidden; float: left; height: 100%; width: 0;}
.lay-right {overflow: hidden; float: right; height: 100%; width: 0;}
.lay-main {overflow-x: hidden; overflow-y: auto; width: auto; height: 100%;}

/* Custom Layout */

.lay>.lay-head, .lay>.lay-foot {
  height: 32px;
  text-align: center;
}

.lay>.lay-body {
  padding-top: 32px; /* Same as head height */
  padding-bottom: 32px; /* Same as foot height */
}

.lay>.lay-body>.lay-left {
  width: 150px;
}

.lay>.lay-body>.lay-right {
  width: 0;
}

/* Content */

.lay>.lay-body>.lay-main {
  text-align: center;
  padding: 20px; /* Custom: 0, 20px */
}

.lay>.lay-body>.lay-main>.content {
  position: relative; /* Center vertically (1) */
  top: 50%; /* Center vertically (2) */
  transform: translateY(-50%); /* Center vertically (3) */
  width: 100%;
  height: 100px;
}

/* Theming */

body {
  background: #ffffff;
}

body, input, textarea, keygen, select, button {
  color: #777777;
}

.lay>.lay-head, .lay>.lay-foot {
  background-color: #000000;
  color: #cccccc;
  text-align: center;
  padding-top: 7px;
}

.lay>.lay-body>.lay-left {
  padding: 7px;
  background-color: #dddddd;
  color: #555555;
}

.lay>.lay-body>.lay-main>.content {
  background-color: #333333;
}

/**/