CODEWITHSUNDEEP
cssheightstyling
Frankg26
Frankg26

Reputation: 81

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!

Upvotes: 1

Views: 2494

Answers (2)

ceferrari
ceferrari

Reputation: 1677

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

Upvotes: 1

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

The problem with setting the header and footer height to 10vh is that when the viewport is short their content may exceed that height, as is the case in your screenshot.

May I suggest a different approach: Give the header and footer a fixed height, and scale the columns to fill the remaining available space:

#top-div,
#bottom-div {
    /* change this to whatever you want */
    height: 100px;
}
#chat-column,
#users-column {
    /* viewport height minus combined height of header & footer  */
    height: calc(100vh - 200px); 
}

Upvotes: 1

Related Questions