Content Is Overflowing From The Main Container

November 26, 2023 Post a Comment

I'm running into a CSS issue in the latest version of both Chrome and Firefox that I can't seem to isolate, any help appreciated. I have a container div that has a 50px top margin.

Solution 1:

Just you need to add min-height:100% instead of height:100% in #container and #sidenav selector.

Please try below css.

Hope this may help you.

html, body {
  margin: 0;
}

#container {
  margin-top: 50px;
  min-height: 100%; /*change*/background-color: lightgreen;
}

#sidenav {
  width: 250px;
  min-height: 100%; /*change*/display: grid;
  background-color: green;
  align-content: space-between;
}

#menu {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
}

#footer {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<html><head></head><body><divid="container"><divid="sidenav"><divid="menu">
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/></div><divid="footer">
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/></div></div></div></body></html>

Update:

Using min-height:100% would give minimum height of it's container even if there is less content and will not exceed.

But if the height exceeds than the container due to more content, that will allow it to exceed without any issue, as we have just restricted it with minimum not maximum.

Solution 2:

The code below will solve your problem .

<html><head><style>html, body {
 margin: 0;
}
#container {
 margin-top: 50px;
 background-color: lightgreen;
}
#sidenav {
 width: 250px;
 display: grid;
 background-color: green;
 align-content: space-between;
}
#menu {
 grid-column: 1 / 2;
 grid-row: 1 / 2;
 background-color: red;
}
#footer {
 grid-column: 1 / 2;
 grid-row: 2 / 3;
}
</style></head><body><divid="container"><divid="sidenav"><divid="menu">
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/>
     sidenav<br/><br/><br/><br/><br/></div><divid="footer">
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/>
     footer<br/></div></div></div></body></html>

Solution 3:

The simple solution to achieve this is using height:inherit , this will inherit the 100% height of the body tag. 
So, the code change will be :
#container {
    margin-top: 50px;
    height: inherit;  /*change*/background-color: lightgreen;
}

#sidenav {
    width: 250px;
    height: inherit;  /*change*/display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

or,

First set bodyheightto100% and then inherit from there.
html, body {
  height: 100%;
  margin: 0;
}

#container {
    margin-top: 50px;
    height: inherit;  /*change*/background-color: lightgreen;
}

#sidenav {
    width: 250px;
    height: inherit;  /*change*/display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

Solution 4:

Even though there are few answer to the question, I was also bothering why height 100% didn't worked I took you code and after executing your code if we remove height 100% or if we keep min-height we get expected result but question didn't end here for me as i was bothering why height 100% was not working

To analyse more i gave border to all sections including HTML and body and the border cleared my doubt

Now if you see the image we have blue border which i provided to html and body and content is even coming out of html and body

Then i tried to find out why height 100% didn't worked

If we give height 100% it will take 100% height of its parent which is body

Note: html {height:100%} relates to parent's height not to the height of the inner content

Than i tried to find out what is height of html and body and important finding is

Your html actually exactly extends to 100% height of your viewport and viewport here is the browser window, not the inner content

**.

Also see below questionheight and width on html and body elements

Now we understand why height 100% didn't worked and if we remove height it will extend to its full content, if we give min-height it take height equal or more than mentioned height If we mention height it will take exact height and extra content will move out of mentioned height

Html5 School