Hi guys, I haven't do HTML, CSS for five years and my knowledge is waned off. So bear with me on my stupid questions. I've a basic page here: <!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="/xxxx/html/css/style.css" media="screen,projection,tv"> <meta property="og:locale" content="en_US"/> <meta property="og:type" content="website"/> <title>XXXX</title> </head><body> <div id="wrapper"> <div id="nav"> <h1><a href="/"><em>XXXX</em></a></h1> </div> <div id="container"> This is an example document. </div> <div id="footer"> <a href="/xxxx/html/signup.html">Sign up</a> || <a href="/xxxx/html/signin.html">Sign in</a> </div> </div> <!-- WRAPPER ENDED --> </body></html> Code (markup): What I want is to make the main navigation div always on top, the footer div always on the bottom and the container div after the main nav which shrink and expand according to the content but not making it way into the bottom div. I want something like this: https://css-tricks.com/boxes-fill-height-dont-squish/ but I want just three rows of block and each block is a unique one. Here's what I've done and the result is disgusting: #wrapper { width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: green; /* just for testing */ } #nav { flex: 1; flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex: 1 1 auto; } #container { flex: 2; flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex: 1 1 auto; } #footer { } Code (markup): Hope I make myself clear. Thank you,
Never mind, I found this: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
1) you're not doing anything (yet) warranting a wrapping DIV. 2) Even though they're kind-of pointless, you might as well use HTML 5's header/main/footer to avoid slopping classes all over the place. 3) if you don't set 100% height on body and HTML, there's nothing for the wrapper to base height on. 4) It's highly unlikely you would be emphasizing the content of a H1. That's redundant semantics. <body> <header> <h1><a href="/">XXXX</a></h1> </header> <main> <h2>Main Content Here</h2> <p> This is an example document. </p> </main> <footer> <a href="#xxxx/html/signup.html">Sign up</a> || <a href="#xxxx/html/signin.html">Sign in</a> </footer> </body> Code (markup): With this CSS: html, body { height:100%; /* in production you'd likely have a reset in use */ margin:0; padding:0; } body { display:flex; flex-direction:column; } body > * { flex:1 0 auto; padding:1rem; } body > *:not(main) { flex-grow:0; background:#5F5; } Code (markup): Here's a pen: https://codepen.io/jason-knight/pen/jOGjWPo One thing you did that's silly is repeat yourself a lot. This: flex: 2; Code (markup): Is outright gibberish. It's binary true/false as 0/1 This: flex:1 1 auto; Code (markup): Is the exact same thing as saying this: flex-grow: 1; flex-shrink: 1; flex-basis: auto; Code (markup): In that order.
Wow! @deathshadow use HTML 5. You have been changed! May I ask another question? Since I like browsing web on a car screen lately (through app), do you have any tips on designing web UI for that? I mean to make it easy to navigate. I haven't code something like this for a long time and have no idea where today's trend heading to. My car screen is 10 inches. Combining with the car sound system it is the future of infosystem technology, I think. The reason I want to do this web thing again is there is no adblock there. You have to see all ads and my evil part of making money from web again coming in. Thank you,