8

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??

Jadeye
  • 3,551
  • 4
  • 47
  • 63

5 Answers5

11

##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";
Cubicle.Jockey
  • 3,288
  • 1
  • 19
  • 31
Alex Movchan
  • 121
  • 1
  • 7
  • 1
    While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Clijsters Nov 22 '17 at 13:44
  • I changed explanation, thanx – Alex Movchan Nov 22 '17 at 15:40
  • This appears to be the best solution for my case (setting a Leaflet map to full height within a Bootstrap container), thanks. – Sören Kuklau Feb 07 '19 at 09:05
10

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
3

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%.

Crepi
  • 645
  • 5
  • 15
  • It's always best to add an explanation of how and why a particular piece of code will answer a question, for future viewers of this question. – Heretic Monkey Dec 17 '14 at 17:33
  • It works but it also effected the header logo, it has disappeared after min-height. please take a look at the link to example. – Jadeye Dec 17 '14 at 17:39
  • @Jadeye Is your header position:fixed? If you don't want it to be fixed, include it in your container and the min-height of the rest would be calc(100% - headerHeight). – HaLeiVi Jan 15 '18 at 00:04
0

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%; */
Jadeye
  • 3,551
  • 4
  • 47
  • 63
-4

Is this what you are looking into? This should do

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

N.Venkatesh Naik
  • 124
  • 1
  • 1
  • 10