-1

The questions looks simple, but am stuck with it.I have main .container with width: 90%; height: 100%; background-color: white.It must be always 100 % height of the page height.My problem, when I get more content and I need to scroll down the page my, .container is ended.

enter image description here

Darius92
  • 301
  • 5
  • 21
  • You obviously don't want a height, but a `min-height`. Using percentages for this is tricky to get working correctly, especially if the rest of the page needs to be able to scroll normally - so I recommend you use the `vh` unit instead, `min-height: 100vh`. Go check caniuse.com for browser support, and see if that is enough for you, or if you need a fallback solution/workaround. – CBroe May 27 '16 at 20:37

2 Answers2

0

this is happening because the content(child elements) is overflowing the parent element height use overflow: scroll

oneLeggedChicken
  • 301
  • 2
  • 6
  • But then I will have one more scroll button for my container? – Darius92 May 27 '16 at 20:25
  • if you want the content not to overflow the parent then you should avoid setting height of children inside the container with pixels and use height:100% on child elements as well – oneLeggedChicken May 27 '16 at 20:28
  • Here is my settings html, `body { height: 100%; max-height: 100%; background-color:#FAF8F1; } .container{ width: 90%; height: 100%; max-height: 100%; display:block; margin-left: auto; margin-right: auto; background-color: white; padding-left:10px; padding-right:10px; border-radius: 5px; border-style:ridge; border-width:2px; }` – Darius92 May 27 '16 at 20:30
  • yes but this is not happening because of the container div or body , this is happening because of the content inside your div container , like this table showing in the picture you've posted – oneLeggedChicken May 27 '16 at 20:33
  • Ok so i must all divs , inside my `.container` change height to 100 % – Darius92 May 27 '16 at 20:36
  • I've changed `#projectResults` where is my table, height to `100 %` and now in `Chrome` it works correctly, but in `Mozilla` problem still here. – Darius92 May 27 '16 at 20:45
0

There is something about height: that you might find super annoying, and that is is it is based on the % of width. so if you write height: 100%; it is actually using the width of the screen not the height. so if you want the height to scale you might want to use em units.

Xan Nava
  • 79
  • 1
  • 11
  • 1
    Source? As far as i know, the height in percentage refers to the parent's height, and defaults to 'auto' if it isn't defined:http://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799 – Sebastianb May 27 '16 at 20:55
  • I was a little off but here is the info. http://www.impressivewebs.com/vertical-percentages-css/ – Xan Nava May 27 '16 at 23:58
  • "A percentage value on height is relative to the height of the containing block", I think you were referrin to percentage in padding/margin – Sebastianb May 29 '16 at 00:14