Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
383 views
in Technique[技术] by (71.8m points)

css - How to have multiple columns that consume 100% height using twitter bootstrap?

I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:

  • I am using twitter bootstrap, so I would like a solution that is compatible with it
  • The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
  • This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
  • I will need the main content to expand the same as the sidebar.
  • The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
  • Notice that the minimum height must be 100%
  • The footer should move if the content grows too much (i.e. it would require scrolling to see it)
  • I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
  • The page content is centered horizontally with a fixed width
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I think this might be, what you are looking for: two column layout source.

The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.

This was made by modifying a bit more complicated and more often used holy grail layout source.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...