Marking up content height/width using %?

Question

I've been playing with front-end web design the past couple of days, mainly using floats/clearfix to position my content. I've been marking up the width of the content using % and that has worked perfectly.

However, if I try to define the height as a percentage of the overall page, it fails to work, more accurately it seems to just wrap around what ever content is there and I have to define the height as a px value.

Is there a reason for this? Is there a workaround where I can use a percentage value and it actually divides up the page?

To force height or width try `min-height` or `min-width` in your CSS --https://developer.mozilla.org/en-US/docs/Web/CSS/min-height — Viridis, Dec 17 '13 at 12:26
I think you'll need to add some HTML and CSS to show what you have tried so far — dav1dsm1th, Dec 17 '13 at 12:27
Please read [How does accepting an answer work?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work), don't edit question titles to include the word SOLVED. — Quentin, Dec 17 '13 at 12:36

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

please try this: give the HTML tag in CSS 100% and then you should try to set the body element in CSS to

display:block;

and give it

min-height:100%

see this topic too:

min-height does not work with body

br paulq

edited May 23 '17 at 12:11

Community

1
1

answered Dec 17 '13 at 12:26

Paulquappe

144
2
6
15

Thanks, that was 3/4 of the answer! I gave the body a height of 100% and position:absolute, then all I had to do was add the min-height:60% and a position:relative. Worked like a charm thanks – WebDesignNub Dec 17 '13 at 12:31

score 0 · Accepted Answer · answered Dec 17 '13 at 12:32

To define the property height in % you need a previous definition on the parent height. Then if you have a parent with fixed height on px you can work with %; but if you want to work % in relation to the window or other % values you need to set a value for all parents.

Then if you want to work with the window % you need this:

HTML like:

<body>
  <div id="container">My div with 100% height</div>
</body>

CSS like:

/*Need to set all parents to 100%*/
html, body {
  height:100%;
}
/*Then set the container*/
#container {
   height:100%;
}

Marking up content height/width using %?

2 Answers2