1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

flex not growing to fit full height

Discussion in 'HTML & Website Design' started by badger_, Nov 23, 2016.

0
  1. #1
    Hello. I'm working on what I find most difficult: css layouts. I'm trying to have a full height column at the left. I've tried this and I don't know what is failing here. Could you please give me a pointer to continue developing this layout?

    Pastebin links (since copypasting here wrecks the tabs):
    • HTML: http://pastebin.com/B68x8hNQ
    • CSS: http://pastebin.com/Yy2xb9ux
    
<!DOCTYPE html><html lang="screen.css" media="screen,projection,tv"><title>
LAYOUT TEST
</title></head><body><div id="top"><div id="contentWrapper"><div id="sidebar"><h2>
Main menu
</h2><ul id="mainMenu"><li>
foo
</li><li>
bar
</li><li>
woo
</li></ul><h2>
Secondary menu
</h2><ul><li>
Source
</li><li>
Links
</li></ul><!-- #sidebar --></div><div id="content"><h2>
What is Lorem Ipsum?
</h2><p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p><h3>
Where does it come from?
</h3><p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p><p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
</p><hr><div id="footer">
&copy; Foobar Networks.
</div><!-- #content --></div><!-- #contentWrapper --></div><!-- #top --></div></body></html>
    Code (markup):
    CSS:
    
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img,pre {
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
(min-resolution:172dpi) and (min-width:1600px)
{
html { font-size:200%; }
}

body {
display:-webkit-flexbox;
display:-ms-flexbox;
display:flex;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}

html,
body {
width:100%;
height:100%;
}

h3,
h2,
p {
padding-bottom:0.75em;
}

#top {
clear:both;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
}

#contentWrapper {
float:left;
width:100;
flex:1 0 auto;
}

#content {
margin-left:20em;
}

#sidebar {
float:left;
width:19em;
background-color:#6bbdd6;
border-right:6px solid #007b9c;
}

#footer {
padding-top:0.5em;
border-top:1px solid #000;
}
    Code (markup):
    P.S.: I just noticed I missed the h1 before h2.
     
    Solved! View solution.
    badger_, Nov 23, 2016 IP
  2. devcake

    devcake Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Hello,

    Add display:flex to the parent (#contentWrapper) and give for the child columns a width which can be whatever you want. 

    
#contentWrapper {
    display: flex;
}
#content {
    width: 19em;
}
#sidebar {
    width:19em;
    background-color:#6bbdd6;
    border-right:6px solid #007b9c;
}
    Code (CSS):
    Hope that will help you.
     
    devcake, Nov 28, 2016 IP
  3. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #3
    Thank you for the reply, it has helped me to understand flex a bit better. According to netrenderer layout appears broken in IE 8,9,10, I read here that flex is somewhat broken.
     
    badger_, Nov 28, 2016 IP
  4. billzo

    billzo Well-Known Member

    Messages:
    961
    Likes Received:
    278
    Best Answers:
    15
    Trophy Points:
    113
    #4
    That flex thing is poorly supported in IE. You can also use display:table to create full-height columns. If you need to constrain the height of a row in your CSS table, set its height to 1px so it will expand its height as needed but no more than necessary.
     
    billzo, Nov 29, 2016 IP
  5. devcake

    devcake Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Flex layout modes are not fully supported in IE yet.
    I recommend you to read this guide which offers backwards compatible alternatives to flexbox properties:
    https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
     
    devcake, Nov 30, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    That's because prior to IE10, there's no such thing AS flex-box. The concept DIDN'T EVEN EXIST yet.

    That's why when I use display:Flex I keep that in mind.... really to me if it doesn't work in IE9/earlier, OH WELL!!! I just live with it since minor visual effects like that shouldn't be a deal breaker so long as the page is still usable to users.

    You CAN theoretically make it kind-of work in IE10 by adding -ms- prefixed versions of the commands, but the implementation can be a bit inconsistent height-wise compared to other browsers.

    That said, since #top has no sibling container, nor does .contentWrapper I'm not entirely clear why that's a deal-breaker for you since you have nothing to be pushing down to the bottom anyways. Normally if you cared about flex expanding you'd have something like your #footer be after those so it's pushed down -- not sure given what you've done why you even have flex on that to begin with... unless you wanted column expansion in which case you wouldn't be floating them, you'd be flexing them.

    What you've done doesnae make a whole lot of sense. Nice code style though, seems familiar. :p

    Really with what you've shown and the fact trying it I get six different layouts in six different browsers, I've got no clue what you're trying to accomplish for layout.

    Oh, and pasting here shouldn't be screwing up your tabs, but there's something horrifyingly WRONG with the character encoding and/or control codes used in your source. What editor are you using? Something like text-wrangler on a quackintosh or some-such? Wordpad?
     
    deathshadow, Nov 30, 2016 IP
  7. #7
    Actually, guessing WILDLY I suspect this is what you were TRYING to do; something I wouldn't be using flex for whatsoever and instead would use faux-columns to fake it.

    
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<title>LAYOUT TEST</title>
</head><body>

<div id="fauxColumn"></div>

<div id="sidebar">

	<h1>Site Title</h1>
	<!-- since it's gibberish to have H2 without a h1! -->

	<h2>Main menu</h2>
	<ul id="mainMenu">
		<li>
			foo
		</li><li>
			bar
		</li><li>
			woo
		</li>
	</ul>

	<h2>Secondary menu</h2>
	<ul>
		<li>
			Source
		</li><li>
			Links
		</li>
	</ul>

<!-- #sidebar --></div>

<div id="content">

	<h2>What is Lorem Ipsum?</h2>
	<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>

	<h2>Where does it come from?</h2>
	<p>
		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
	</p><p>
		The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
	</p><p>
		Where can I get some?
	</p>

	<div id="footer">
		<hr>
		&copy; Foobar Networks.
	<!-- #footer --></div>

<!-- #content --></div>

</body></html>
    Code (markup):
    
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img,pre {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
	(-webkit-min-device-pixel-ratio:2) and (min-width:1600px), 
	(min-resolution:172dpi) and (min-width:1600px)
{
	html { font-size:200%; }
}

h3,
h2,
p {
	padding-bottom:0.75em;
}

#fauxColumn,
#sidebar {
	width:19em;
	background:#6bbdd6;
	border-right:6px solid #007b9c;
}

#fauxColumn {
	position:absolute;
	bottom:0;
	left:0;
	height:999em;
}

#sidebar {
	position:relative;
	float:left;
}

#content {
	position:relative;
	overflow:hidden; /* prevent de-indent when taller than sidebar */
	zoom:1; /* trip haslayout, prevent de-indent IE6/earlier */
}

#footer {
	padding-top:0.5em;
	border-top:1px solid #000;
}
    Code (markup):
    Which has the advantage of likely working all the way back to IE 5.x. If you don't care about IE6/earlier you could use generated content instead of the faux-column DIV. That DIV is simply absolute positioned behind the column to create the APPEARANCE of full height, taking advantage of the fact that absolute positioned elements off the TOP of the screen (thanks to a ridiculous height and bottom position) does not add to the scroll height. We don't need to play with z-index since adding position:relative to the sidebar and content area adjust accordingly preserving the painters algorithm.

    If you care about IE10/earlier, you're best off avoiding bleeding edge barely ready for prime-time methodology like flex.

    Live copy here:

    http://www.cutcodedown.com/for_others/badger_/
     
    deathshadow, Nov 30, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Oh, duh... IF you were trying to do what I thought, you had flex-direction wrong. Column means create a SINGLE column, not multiple. You wanted flex-direction:row -- which is the DEFAULT.

    I added those as .flex here:
    http://www.cutcodedown.com/for_others/badger_/

    Again though, beware that IE9/earlier have no clue what flex even is, so supporting those is flat out you go the flex-box route! Also beware the more "DIV" you try and get involved, the more likely it is that IE will go tits-up on trying to display it. Likewise if you want "flex in a flex" expect Chrome to lose it's **** in an equally nutjob fashiion, which can make things like implementing max-width effectively impossible mixing the two layout techniques.
     
    deathshadow, Nov 30, 2016 IP
  9. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #9
    Thank you so much! I'm still processing all the great information.

    I'm using vim with utf8 encoding, next time I'll try with a different setting... I thought it was some issue with this WYSIWYG. I am trying to fix this layout while keeping the same appearance in order to learn: http://www.openbsd.org/

    I'm trying again, this modification to your faux template seems to work (I still have to test in more browsers though):
    • Put h1 just after #content, move #sidebar below.
    • Set #sidebar as absolute, top:0 left:0
    • Set #content with left margin of the width of the sidebar.
    Is this a good approach?
     
    badger_, Dec 1, 2016 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    That should be fine... the only thing I'd check is to make sure it's spitting out both CR/LF and not just one or the other. Linux does just one, Mac does just the other, entire RoW expects both.

    WYSIWYG? Oh, do you mean on these forums? I usually have that blocked/disabled. It's USELESS on a development forum, and really if on a forum filled with programmers people can't handle a little BBCode...

    It has one big problem. The MOMENT you declare an element as fixed or absolute, it is "removed from flow" -- what that means is it no longer reports its HEIGHT for scrolling purposes. This can cause major headaches which is why major sections of content should NEVER be APo. (position:absolute). You want to do something like a full width footer after that sidebar, it'll ride up OVER the content of that sidebar if the window is too short, as it will have NO CLUE how tall it is. That's part of why things like dropdown menus when "massive" can in fact bite you in the arse. (alongside a woe called "link overload" that's a major usability faux-pas.)

    APo and FPo (position:fixed) really need to be used with an eyedropper and reserved for small elements or placement over/around elements that remain in flow. Using either on major sections containing text is just asking for problems as again, nothing else on the page is aware of their size in EITHER dimension.

    Shrink the window with a content that's shorter than your sidebar, and try placing a footer AFTER both columns to see what I mean.

    ... and yeah, that OpenBSD site has "problems"; like even if you were to fix it there's no obvious parent heading for the whole page. A rhesis monkey with its neck stretched out like a tube sock and head splattered against a concrete wall could make a better site. :p

    Kidding; reminds me of one of my old avatars.
    [​IMG]
     
    deathshadow, Dec 1, 2016 IP
  11. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #11
    I've just disabled the "Rich text editor" in Preferences, it's much better now without goofy buttons disturbing me. Thank you... in my opinion this should be the default in this forum.

    I've done what you say and effectively the sidebar does not push the footer down. I take good note about this... it's difficult for me to fully understand how the flow works, but step by step I'm learning. I'm too surprised how people find "easier" to use things like bootstrap; before finding your site I've tried to use bootstrap and other frameworks several times without success and they're a royal PITA, and the fact that a site need javascript to spit words is a no-go. I use Noscript and these kinds of sites make me work for them.

    I'll continue reading older posts and trying new things. I see no point in trying to replicate the behaviour of a broken layout like this one.

    Your help is much appreciated, thank you so much.
     
    badger_, Dec 1, 2016 IP