CSS: Absolute vs static/relative positioning

Design Front End Development
2

Great question! I had a good bit of fun toying with your jsfiddle. My optimized code is below — it uses more-or-less the same positioning though.

Fact of the matter is that if you want something that stretches vertically with the viewport, you need to use JS or absolute positioning, and I don’t think there’s anything wrong with that — I’ve worked on apps that use absolute positioning for the main layout, and floats/inline content within that layout.

HTML

<body>
  <header>aaa | bbb | ccc</header>
  <aside>Fixed Width Navigation</aside>
  <div class="content">
    <h2>Some Form here</h2>
    <footer>
      <input type="submit" value="Always at the bottom"></input>
    </footer>
  </div>
  <footer>ccc</footer>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  background-color: red;
}

aside {
  position: absolute;
  left: 0;
  bottom: 50px;
  top: 50px;
  width: 250px;
  background-color: blue;
}

.content {
  position: absolute;
  top: 55px;
  bottom: 55px;
  left: 255px;
  right: 5px;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 5px white, inset 0 0 0 7px red;
  background-color: white;
  text-align: center;
}

.content footer {
  position: absolute;
  border: 2px solid green;
  bottom: 10px;
  right: 10px;
  left: 10px;
  height: 30px;
}

body > footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: black;
}