Allen Eubank | Thoughts and Essays

Welcome! Up until recently I was working full-time as a web developer at Brighter. Where I was programming in HTML, CSS, JavaScript, Java, C#, Cold Fusion, and Ruby. I learned a great deal while I was there but now I am looking to get out there on my own.

Well if you are reading this far along, I guess I can show something I learned while building this relatively simple web site. Here we go.

While I was building this site I ran across the problem of having the main, center content of the site not using all the space available. Even though I had set everything to a height of 100%, it would simply not fill the height of browser. Here is what I am talking about.

Before

I thought I might be able to solve this problem with some CSS.

.content {
  padding-bottom: 100%;
}

Which did work but it added a lot of extra, empty space at the bottom of page. It was not sexy. Did some googling and came across this Stack Overflow post.

A ha! I was surprised that a simple CSS solution did not exist. Which took me to my javascript solution.

A la code…

function setContentHeight() {

  // Grab the height of the viewport or the height of the visible screen
  var viewportHeight = document.documentElement.clientHeight
  // Grab the height of my content div that I want to fix
  var content = document.getElementsByClassName('content')[0]

  // If the height of the visible space is greater than my contents
  // height increase it to fill the remaining space.
  if (viewportHeight > content.clientHeight) {
    // Doesn't understand unitless numbers, use pixels instead
    content.style.height = viewportHeight + "px"
  }

  setTimeout(100) // Set a small timeout for the resize event
}


setContentHeight() // Call the function
window.onresize = setContentHeight // Bind it to the window resize event

After

There you have it. With this bit of javascript code, the content div now sets its height dynamically based on the height of the viewport. Adiós.