Style elements in html page to adjust dynamically depending on the size of the screen

Hey guys I am building a web chat and my first objective is to put together the html page. I am using the BootStrap 3 grid, so whenever I resize the width of the screen my elements adjust accordingly to the size of the screen. However, the BootStrap grid does not work when I resize the height of the screen, hence my button is cut off and I cannot figure out a way to solve this. I tried using a library from git hub (https://gist.github.com/metaist/7632393), but it did not solve my issue either...

This is my code:

HTML:

<body>
    <div class="container">

        <div class="row" id="top-div">
            <!-- The users username -->
            <h1 class="text-primary">Placeholder Username</h1>
        </div>


        <div class="row" id="chat-and-users">
            <div class="form-group" id="middle-div">
                <div>
                    <div class="col-xs-9 bg-info" id="chat-column">
                        <!-- Chat Column -->
                    </div>
                    <div class="col-xs-3 bg-success" id="users-column">
                        <!-- Users Column -->
                    </div> 
                </div>
            </div>
        </div>


        <div class="row" id="bottom-div">
            <form action="">
                <div class="form-group">
                    <input type="text" id="message-input" class="form-control" placeholder="Type a message...">
                </div>   
                <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
            </form>
        </div>

    </div>
</body>

CSS:

body{
    background-color: #E5E5E5;
}

#chat-and-users{
    border-radius: 3px;
    border: 1px solid #202020;
}

#chat-column{
    height: 80vh;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-right: 1px solid #202020;
}

#users-column{
    height: 80vh;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #202020;
} 

#bottom-div {
    margin-top: 15px;
}

This is how my page looks, notice that I cannot see the entire button even if I reduce my doc (My apps) to the minimum size...

[![enter image description here][1]][1]

I want the h1 to take 10% of the page, the blue/green rectangles 80% of the page (hence why I gave them a height of 80 vh), and the input/button form 10% of the page. Any form of help is appreciated!

Solution

Add this:

html, body, .container {
    height: 100%;
}

#top-div, #bottom-div {
    height: 10%;
}

#chat-and-users {
    height: 80%;
}

And remove height: 80vh from #chat-column and #users-column

vh is relative to your viewport. That's why it's not changing when you resize the window. %, on the other hand, is relative to the parent element, in this case body, which has a height of 100% now