11

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

Improve this question
2
  • 1
    link to image is spam Commented Feb 2, 2017 at 3:54
  • @DrewDelloStritto what do you mean?? this url("../img/back1024.jpg");?? Commented Feb 5, 2017 at 10:37

5 Answers 5

Reset to default
14

##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";
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

While this code snippet may solve the question, including an explanation 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.
I changed explanation, thanx
This appears to be the best solution for my case (setting a Leaflet map to full height within a Bootstrap container), thanks.
11

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

Improve this answer

Comments

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

Improve this answer

3 Comments

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.
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 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).
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%; */
Improve this answer

Comments

-4

Is this what you are looking into? This should do

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.