Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Coffin
10,359 PointsOn Height and the Tao of Webpage Design
When it comes to webpage design, I've always struggled with height. What I would like to do is have a page where the header is at the very top, the content is centered in the middle, and the footer is glued to the bottom of my browser. Google is a good example.
As it turns out, this is typically a big headache to achieve. One typically has to pad out their content in some way, and whether one is adding an arbitrary number of page breaks or using CSS to set the size of a DIV, it always feels like a brittle work-around that is bound to fail.
So much so that I am starting to wonder if the Tao of webpage design dictates that I should stop trying to fit things in boxes, use responsive design for the width, let the length of the content dictate the length of the page, and then just put the footer at the end. If one ignores the shelf on the left, Team Treehouse's website -- the Membership page in particular -- are good examples of this.
I'd love to hear what everyone thinks? For adjusting and setting the height, I'd also like to hear what people have used in a pinch, what the intended usage is as per the spec, and what people think would be an elegant solution. I'd also like to hear what people find easy or annoying to use.
4 Answers
Saurabh Datta
1,042 Points1) height based design is Hell. it is the dark side. never embrace the dark side. I speak from experience.
2) the membership page is not height sensitive. It is regular flow. Depending on the screen, it has scrolling.
3) for the footer in the bottom, use fixed positioning: bottom:0.
4) if you page's text is static, or if the approx dimensions are known, centering it is not going to be a big deal.
5) If you intend to play with these dark forces, please elaborate on what you're trying to achieve. Maybe I can help you out.
6) The most fucked up decision, is to use flexbox. Google it. And then google for knacss and use their flexbox classes to create a flexbox layout and see the magic happening.
7) Remember, height sensitivity, and responsiveness together, will give you a heart attack.
Kevin Lozandier
Courses Plus Student 53,747 PointsJohn Coffin: Also remember with viewport units, designs that do need to be mindful of the height of the viewport (content that needs to be above-the-fold) are easy now.
Along with the intrinsic and extrinsic value properties I've informed you about, as well as flexbox, you should be able to tackle on most height-based CSS problems with relative ease. Also, granular use of properties such as columns, white-space, allows you to dramatically change the flow of your content vertically.
Before using all these things, critically think whether or not you should approach a particular design problem with these CSS features.
The practicability of it may be too low to warrant a lot of time thinking about it; it often requires providing the ones in charge of the content very specific guidelines on what content to use for certain parts of the site. .
John Coffin
10,359 PointsKevin: I couldn't agree more: Height is incredibly difficult. I would much rather start with a design that works with the media that I working in -- in this case, HTML -- so that I am not going to be fighting it every step of the way. Height is one of those things that just doesn't work the way I expect it to, and I believe that the source of the problem is that I tend to think of the web page not as a document (which it is) but as an app that should fit the full dimensions of the screen.
I have not gotten to Flexbox just yet. I'd like to come to grips with what little I have learned so far. However, it sounds as though that when I do get there, it will answer a lot of my questions.
John Coffin
10,359 PointsSaurabh: I greatly appreciate that your first point is that "height based design is Hell."
Right now I'm trying to figure out what I should be doing in hopes of simplifying how I can achieve it. In other words, I don't want to "play with these dark forces" if I can avoid it. Unfortunately I keep falling into the same trap of designing something that is the size and shape of a screen and then trying to make it adapt to fit all screen sizes. The typical result is ... well ... a lot of effort for a bad looking web page.
The more I look at different web pages, the more I see that even those pages that look as though they were designed to fit the screen really don't. More importantly, I can see that because they are done properly, it doesn't really matter.
Saurabh Datta
1,042 PointsJohn Coffin Please remember that content will always flow down. You should not resist it. You can although have other columns, such as navs, of full height. Just let them be position:fixed;top:0,bottom:0. Leave the column with content scrollable and you shall find peace in your design.
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsHeight, including baseline height, are incredibly difficult things to take into account considering the many forms of content of varying height and width that'll be on a web site throughout its lifetime.
Accordingly, your design shouldn't be too rigid about things such as height unless its feasible and realistic to dictate only content with specific dimensions (or of a particular ratio) occupy certain sections of your design.
intrinsic and extrinsic values and properties can help.
Also Flexbox can help as well, with the default values of stretch allows for the cross axis of its implementation on all browers to cause equal height for items inside a element with
display: flex&flow-direction: columndeclared.