CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jadeye
Jadeye

Reputation: 4269

Get Bootstrap container to full height

CSS:

html,body {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom:0;
  margin: auto;
  font-family: "Alef";
  background: #767E58;
  background-size: contain;
  background-image: url("../img/back1024.jpg");
  overflow-y: auto;
  overflow: auto;
}
.container {
  height: 100%;
  width: 900px;
  background-color: #000;
  /* overflow: auto; */
}

If you zoom above 110% the container is smaller then full height.
I could not find out why...
Any ideas what I'm doing wrong there?
Tried adding:

.container:after{
    clear: both;
    content: "";
    display: block;
}

And:

<div style="clear: both; line-height: 0;">&nbsp;</div>

Suggested here:
SOW
Both didn't work.

IT DOES WORK WITH
overflow: auto; ON container DIV

But that yields a vertical scroll bar on that div, which I do not wish to have. I wish to have it on the background image/ browser.

How can I fix that??

Upvotes: 10

Views: 57271

Answers (5)

Alex Movchan
Alex Movchan

Reputation: 141

##Set heigth by ViewportHeigth (VH) CSS3: This solution from last specification of CSS3, But no works in safari browser:

div {
    height: 100vh;
}

VH - it's relative length like '%'. If you set heigth 100vh the container take full heigth of browser window. 1 vh relative to 1% of the height of the viewport. Example on codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100;

##Or you can set the full height by using JS:

HTML:

<div id='block'></div>

JS

document.getElementById('block').style.height = window.innerHeight + "px";

Upvotes: 13

Carol Skelly
Carol Skelly

Reputation: 362270

The original question was for Bootstrap 3.x when floats were used instead of flexbox.

As of Bootstrap 4.2 and later, the vh-100 and min-vh-100 classes are included and it easy to make a full height container using these classes:

<div class="container min-vh-100">
 ...
</div>

https://codeply.com/p/IPlb9eT9av

Upvotes: 10

Crepi
Crepi

Reputation: 655

Try with min-height: 100% instead of height: 100% at container div.

edit: explanation

When you put height to 100%, it depends on dimensions of parent element, in this case body. And it's initial height is height of the screen without scroll. So, if div's content doesn't fit the screen it needs more than 100%. If you don't put anything for the height attribute, div height will fit content. But then it won't expand if you zoom out. That's fixed if you put min-height: 100%.

Upvotes: 3

Jadeye
Jadeye

Reputation: 4269

Solution was what @Crepi has suggested along with changing Header Logo DIV Height from percentage to fixed px size and removing the top:

.container {
  min-height: 100%;
  width: 900px;
  background-color: #000;
}

.headLogo {
  width: 242px;
  height: 200px;
  /* top: 6%; */

Upvotes: 0

N.Venkatesh Naik
N.Venkatesh Naik

Reputation: 134

Is this what you are looking into? This should do

.container { height: 100%; position: absolute; }

Upvotes: -4

Related Questions