Menu
I'm trying to make following layout:
+-------------------------------------------------+ | Header + search (Twitter navbar) | +------------+------------------------------------+ | | | | | | |Navigation | Content column | | | | | | | | | | | | | | | | | | | +------------+------------------------------------+ | Footer | +-------------------------------------------------+ Layout must take all available height & width, navigation and content columns take all available space and scroll on overflow, footer should stick to bottom.
HTML looks like this now:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> <link href="css/app.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/app.js"></script> </head> <body> <div class="container-fluid"> <div class="navbar"> <!-- navbar content --> </div> <div class="row-fluid columns"> <div class="span2 article-tree"> <!-- navigation column --> </div> <div class="span10 content-area"> <!-- content column --> </div> </div> <div class="footer"> <!-- footer content --> </div> </div> </body> </html> CSS:
body, html, .container-fluid { /// take all available height height: 100%; } .article-tree { color: #DCE6E5; background: #2F323B; } .content-area { overflow: auto; height: 100%; /// explicit height to make scrolling work } .columns { height: 100%; /// columns should take all height margin-top: 42px; /// minus header margin-bottom: 20px; // minus footer } .columns > div { height: 100%; // make each column to take all available height } .footer { background: red; height: 20px; } In theory it should work, but columns.margin doesn't work as I expect. I thought it should make height = 100% - magin, but it just moves the container.
I've googled and seen numerous questions on StackOverflow. All of them include JavaScript or position: absolute and manual positioning. IMHO they're more hacks than a solutions, I think there should be some simpler and more elegant and cross-browser way to solve this problem.
So how do I make layout described above? Maybe Bootstrap can help me (I've looked through documentation, but there are no mentions of cases like this)?
231
HTML is the language for describing the structure of Web pages. HTML gives authors the means to: Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button.
HTML is perhaps one of the easiest front-end programming languages to master. So if you want to learn HTML, then go for it! With patience and practice, you'll learn to make the most of this popular language.
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
I've found a post here on Stackoverflow and implemented your design:
http://jsfiddle.net/bKsad/25/
Here's the original post: https://stackoverflow.com/a/5768262/1368423
Is that what you're looking for?
HTML:
<div class="container-fluid wrapper"> <div class="row-fluid columns content"> <div class="span2 article-tree"> navigation column </div> <div class="span10 content-area"> content column </div> </div> <div class="footer"> footer content </div> </div> CSS:
html, body { height: 100%; } .container-fluid { margin: 0 auto; height: 100%; padding: 20px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .columns { background-color: #C9E6FF; height: 100%; } .content-area, .article-tree{ background: #bada55; overflow:auto; height: 100%; } .footer { background: red; height: 20px; } I know it's late in the day but might help someone else!
body,html { height: 100%; } .contentarea { /* * replace 160px with the sum of height of all other divs * inc padding, margins etc */ min-height: calc(100% - 160px); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With