0

Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):

I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:

html, body {
  height: 100%;
  background: url(../img/bg.png);
  font-family: 'SansationRegular', Helvetica;
}

.wrap {
  width: 100%;
  height: 100%;
  height: auto !important; (apparently this fixes the issue in Chrome)
  margin:40px 0px 0px 0px;
  padding:0;
}

Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.

Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.

Any ideas/hints are highly appreciated at this point! :)

Many thanks in advance!

P.S. I use Twitter Bootstrap as well in case that helps to solve my problem

3
  • 1
    I can't help you without seeing relevant code. Please provide all the HTML and CSS to demonstrate the problem, but without anything irrelevant.
    – KatieK
    Jan 10, 2013 at 22:23
  • If you have a live link, that would help the most. Especially for something like this.
    – Omega
    Jan 10, 2013 at 22:36
  • Did you use height : 100vh instead of height: 100% css property. Sep 16, 2018 at 18:51

1 Answer 1

0

Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.

http://jsfiddle.net/QXZuy/1/

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>


html, body {
  height:100%;
}
.wrap {
  height:100%;
  width:100%;
  display:table;
  overflow:auto;
  background:#ccc;
}
.sidebar {
  display:table-cell;
  width:25%;
  background-color:blue;
}
.content {
  display:table-cell;
  width:75%;
  background-color:red;
}
3
  • Thanks Billy Moat. I tried this already but as soon as the content grows longer than the initial screen size it won't work anymore. At least in my case.. Jan 11, 2013 at 8:54
  • @domdev - I've amended my answer to use a different method. Have a look and see if that works for you...
    – Billy Moat
    Jan 11, 2013 at 10:12
  • Thanks Billy! I tried all CSS tricks but couldn't get it to work. I decided to go with a bit of jQuery and it works like a charm (see below). Thank you a lot for your help though! Jan 11, 2013 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.