CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
jamuna
jamuna

Reputation: 91

set column to full height of the page not exceeding the page size

I have a navbar on the top and set the html and body to height 100% and i seperated the page into two columns using bootstrap grid and I want to set the height of the two columns that it should not exceed the page so that No scroll bar appears

How to set the column height so that scroll bar do not appears

Upvotes: 0

Views: 1408

Answers (3)

Shakiba Moshiri
Shakiba Moshiri

Reputation: 23874

You can achieve it using height: 100% on the parent and grandparent and so on. You can see a demo on codepen:

https://codepen.io/k-five/pen/gZgwqO

or here:

html,body{
height: 100%;
  margin: 0; padding: 0; border: none;
}

body > div.parent {
  height: 100%;
}
div.parent > span {
  display: inline-block; width: 50%;
}
div.parent > span:first-child {
  
  height: 100%; background-color: #F00;
}
div.parent > span:last-child {
  height: 100%; background-color: #FF0;
}
<!DOCTYPE>
<html>
  <body>
    
    <div class="parent">
      <span>1</span><span>2</span>
    </div>
    
  </body>
  </html>

And if you want to use bootstrap take look at https://getbootstrap.com/docs/4.0/utilities/sizing/ which is h-100

Upvotes: 1

Dio Villasencio
Dio Villasencio

Reputation: 11

Have you tried using .row-eq-height from Bootstrap? Have a look here.

Be warn though that they're using flex style so check your supported browsers first before using these kind of css.

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

One more thing, for classes like these col-md-6 col-sm-6 col-xs-6 col-lg-6 you don't have to specify all the breakpoints. Just use col-xs-6 and it will be applied to all breakpoints hence "mobile first", to save you some code and filesize. Let me know if that helps. ;)

Upvotes: 0

Alexander Kozyrev
Alexander Kozyrev

Reputation: 25

Have you tried vh?

.column2{
    height: 100vh    
}

It stands for viewport height, and will be the exact size of the screen you're viewing this on.

Upvotes: 0

Related Questions