Geek asks and answers

What is the most common mistake that you have CSS 100% div?

Alrighty

I will try to explain what is going on with me. Let me know if you need more information.

Basically, I have a div container, and I will style it in height:100%;It will do 100%, but it will only be 100% for the current browser / window size.

For example: if I maximize the browser, the container will do 100%, but if I scroll down, the height of this container will be equal only to the height of the browser.

Another example: if I minimize the browser to a certain size and refresh the page, the container will go back to 100% only to the size of the window. Therefore, if I maximize the browser, the height container will still have the same height if the browser is minimized.

So, if I have a long page, the container does not reach the page, the container only reaches the window height when loading the page.

I am trying to bring the container to 100% to the bottom of the page, even if I have a footer or header, the container should be 100% between them.

So, I will try to publish the most relevant code:

body,html
{
   display:block;
   position:relative;
}
#container_100percent
{
   overflow-x:hidden;
   position:relative;
   overflow-y:auto;
   width:20%;
   min-height:100%;
   height:100%;
   float:right;
}


<div>
  <div id="container_100percent">
     <!-- some stuff !-->
  </div>
</div>
+3
source share
2 answers

100% height is the height of its parent.

This means: if the parent div container has no height, the height will be set to 100%, as well as for the body. This is why your div has the height of your window.

So you need to give your wrapper a div height, and the inner div will take that height.

+1
source

, , , height. .

, (.. , , ), min-height.

0

More articles:


All Articles