Why does my wrapper only work when min-height is set to a fixed amount?

Question

I have a wrapper set for my site that encompasses everything but it will only show up on the part of the screen that you can see directly. Once you scroll the wrapper ends and every other element is just beneath it.
Although if I set min height to a fixed amount such as 50em it will continue the wrapper down to that amount.
Is there a way to do it without giving it a fixed amount?
Below is my css code for the wrapper and the min-height.

 #sb-site, .sb-site-container, .sb-slidebar, body, html { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #f0f0f0; min-height: 100em; height: 100%; position: relative; } html.sb-scroll-lock.sb-active:not(.sb-static) { overflow: hidden; } #sb-site { width: 100%; background-color: #f0f0f0; } .sb-site-container { padding-top: 4em; width: 80%; height: 100%; position: relative; background-color: #fafafa; margin-left: auto; margin-right: auto; } 

Answer 1

只需添加max-height而不是min-height 。