Search code examples
javascriptjqueryhtmlcssfluid-layout

I'm having issues with a fluid layout

I'm trying to have a fluid design that can be used for mobile support. I can make it zoom in and resize the divs correctly but when i try to add fixed positions for the chat window and chat message input box, it doesn't work. Div 2 and Div 3 bunches up to Div 1 and if i change the wrapper to fixed position, the automatic resizing stops working completely.

Here's how the design works: enter image description here

Is it possible to achieve this without using javascript, and if not, what can be done to achieve my goal?

EDIT: Removed Code since it is no longer relevant.

The solution has been found! - Going to use Flexbox (does exactly what I would want plus it does more), thanks Jason! - If I need to add IE9 support, I'll use Modernizr as shown in the comments. Thanks XKCD149!

Solution

  • Here's how you'd accomplish the above layout using flexbox:

    .wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

nav {
  background-color: blue;
  height: 50px;
}

article {
  background-color: red;
  flex: 1 0 auto;
}

footer {
  background-color: green;
  height: 50px;
}
    <div class="wrapper">
  <nav>My Nav</nav>
  <article>My Main Body</article>
  <footer>Footer</footer>
</div>