- This topic is empty.
-
AuthorPosts
-
November 19, 2013 at 5:58 am #156503intodesignParticipant
Hey, I have body of 100% and 3 divs inside, let’s say i would like that div #1 will be 10%, div#2 30%, div#3 60%.
I can’t figure how to control the div’s height ?November 19, 2013 at 6:18 am #156504janet4nowParticipantthe height will be determined by the content inside the div, or you can specify a height or min/max-height. (Not sure why you want to, though)
What are you trying to do specifically? Do you have an image of the layout or a site in progress you can share?
November 19, 2013 at 6:23 am #156505intodesignParticipantI’m trying to give it height by percentage, because if i’ll watch it on a TV it make no sense that the div will be in pixels
code for example
http://codepen.io/anon/pen/obyuIcan you help please?
November 19, 2013 at 6:53 am #156507janet4nowParticipantbody, html { width: 100%; height: 100%; } .div1 { background: blue; height:10vh; } .div2 { background: red; height:30vh; } .div3 { background: green; height:60vh; }
Use “vh” which is “viewport height” rather than % or pixels.
November 19, 2013 at 6:54 am #156508AlenParticipantI’m trying to give it height by percentage, because if i’ll watch it on a TV it make no sense that the div will be in pixels
What do you think 720p and 1080p refer to?
Pixels.
November 19, 2013 at 10:19 am #156536wolfcry911Participant@intodesign, you can use percentages. The only thing your missing is setting html to height: 100% as well as the body. And I’d remove all the width statements – the block level elements will take up all available width by default. You may want to set the body margin and padding to 0.
November 19, 2013 at 10:24 am #156538MerriParticipantIn short:
html,body { height: 100%; margin: 0; } .div1 { background: blue; height: 10%; } .div2 { background: red; height: 30%; } .div3 { background: green; height: 60%; }
November 19, 2013 at 10:51 am #156549paulobParticipantSetting a height on elements is a bad move if they are going to contain fluid elements like text because the content will spill out if the text is resized or if there is simply not enough room (e.g. when the browsers window is closed smaller).
I think you need to explain a little more about what you are trying to achieve as I can’t see much use for the elements to be spread across the viewport like that unless its just a simple page with a few headings or similar.
You always need to try out your demos with “real content” so that you can see what will happen when there is too much (or too little) content in your elements.:)
You could use Merri’s code above but use display:table (IE8+) so that the element can still grow if required.
.div1,.div2,.div3 {display:table;width:100%}
November 19, 2013 at 11:14 am #156553MerriParticipantTables require a lot more CSS syntax: http://codepen.io/Merri/pen/vDius
Instead I’d just replace div heights with min-height in my example earlier above to get similar results with less syntax. I updated the CodePen snippet to min-height (drkjc).
Margins may give some additional headache when not using tables, but those issues are usually easily resolved (
overflow: hidden;
or giving some top and bottom padding to the divs).Of course we still don’t really know the context of this.
November 19, 2013 at 12:49 pm #156560paulobParticipantTables require a lot more CSS syntax
They only need the one line I posted in my last post but min-height would also work as you suggest as long as you don’t nest the min-height element or you will lose the height.
However, both yours and my suggestions are flawed because should you add more content into one of the areas then the whole thing stretches past the viewport bottom edge when there is no need for it to do so.
A better approach (assuming this was the OPs idea) is to use a complete CSS table structure and allow areas to grow while not forcing the content below the fold when its not required. It’s more mark up but ultimately more reliable.
e.g.
http://www.codepen.io/paulobrien/full/JjtnHOf course that assumes that I have understood the requirements properly – which may not be the case :)
November 19, 2013 at 1:17 pm #156562MerriParticipantYou don’t need that much syntax to get that end result: http://codepen.io/Merri/pen/CcLlJ
AFAIK table-cell element is automatically created if it’s omitted. Same for other missing table elements. Quite handy. Although I haven’t verified whether all browsers do follow this properly, because I don’t usually use table based layouts.
November 19, 2013 at 1:30 pm #156565paulobParticipantAFAIK table-cell element is automatically created
Yes, that’s correct and that should work nicely in modern browsers and your latest example is now pretty concise. :)
Firefox used to have an issue if you didn’t explicitly create a table-row and a table-cell but that’s long since been fixed but I keep forgetting to omit them.
November 21, 2013 at 2:05 am #156778intodesignParticipantThanks so much.. that was very helpful, Great code.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.