CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Şeyma Yaman
Şeyma Yaman

Reputation: 121

Setting div's height according to browser height

I want to create html code using Bootstrap. But i have a problem. I don't adjust div's height according to a browser height. I tried everything i know.

How can I adjust the div's height browser height?

Here is my code:

body{
    height: 100%;
    width: 100%;
}
#leftMenu{
    height: 500px;
}

#viewport{
    height: 400px;
    overflow: hidden;
}

#informationMenu{
    height: 100px;
    overflow: scroll;
}

#rightMenu{
    height: 500px;
}
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" >
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                <div class="row" id="viewport" style="background-color: aquamarine">
                </div>
                <div class="row" id="informationMenu" style="background-color: cadetblue">
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00">
            </div>
        </div>
    </div>
</body>

Upvotes: 1

Views: 241

Answers (1)

Razvan Alex
Razvan Alex

Reputation: 1802

You should be using vh for height. It also has responsive design. 1hv = 1% of the viewport height (broswer), meaning that 100vh will be the value you need ;)

Edit: If you're trying to do the same for width, you need to use vw instead of vh because vh refers to the height and vw refers to the width ;)

Upvotes: 2

Related Questions