Clever Geek Handbook

Load Bootstrap container full height

The complete picture:
Example
OR
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 in above 110%, the container is smaller than the full height.
I couldn't figure out why ...
Any ideas what I'm doing 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.

THIS WORKS WITH
overflow: auto;

ON CONTAINER DIV

But this gives a vertical scrollbar on that div, which I don't want to have. I want to have it in the background image / browser.

How can I fix this?

+3


source to share


4 answers


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

edit: description



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

+3


source


Set vertex using ViewportHeigth (VH) CSS3:

This solution is from the latest CSS3 spec but doesn't work in Safari browser:

div {
    height: 100vh;
}

VH is a relative length such as '%'. If you set it to 100vh, the container will be completely filled with the browser window. 1 vh relative to 1% of the viewport height. Example for codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100 ;

Or you can set the full height using JS:



HTML:

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

Js

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


source


The solution was what @Crepi suggested along with changing the DIV's Height from size to fixed size and removing the vertex:

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

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


source


Is this what you are looking at? This should do

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

-2


source






More articles:


All Articles