How can I make my sidebar as long as the content's height %100 on my html page ?

Question

My english is not so good, sorry about that.

I'm working on a project about css and html.

Here is my problem : I want to make my sidebar's height as long as my content page. if I add something to my content page, the left nav's height should be equal the content page.

<div class="container">
    <div class="container-fluid">

        <div class="leftnav">
            xxx
        </div><!-- leftnav -->
        <div class="content">
            xx
        </div><!-- content -->

    </div><!-- container-fluid -->
</div> <!-- container -->

.container{width: 1170px;margin:0px auto;}
.container-fluid{float: left;width: 100%;}

.leftnav{float: left;width: 280px;background: #fff;}
.content{float: left;width: 890px;background: #000;}

Check again, in the same answer, after the `flex` version there is a `display: table` version which works perfect all the way down to IE8. — Asons, Dec 17 '15 at 15:52

score 0 · Answer 1 · edited Dec 18 '15 at 15:45

0

The best way, for me, is using setting the elements to 100% like i did below.

I put some color so you can see what you are looking at.

html, body {
  height: 100%;
  margin: 0;
}

.container {
  width: 1170px;
  margin: 0px auto; 
  display: block;
  height: 100%; 
}

.container-fluid{
  float: left; 
  width: 100%;
  height: 100%; 
}

.leftnav{
  float: left; 
  width: 280px; 
  height: 100%; 
  background: red;
}

.content{
  float: left; 
  width: 890px; 
  height: 100%; 
  background: #ccc;
}

<div class="container">
    <div class="container-fluid">

        <div class="leftnav">
            xxx
        </div><!-- leftnav -->
        <div class="content">
            xx
        </div><!-- content -->

    </div><!-- container-fluid -->
</div> <!-- container -->

edited Dec 18 '15 at 15:45

Asons

84,923
12
110
165

answered Dec 17 '15 at 14:05

Gabriel Augusto

436
4
8

This won't work. Did you try it before posting it? – Asons Dec 17 '15 at 14:17
This works. Where are you trying? Don't try on codepen or similars because they ignore the html and body tags. – Gabriel Augusto Dec 17 '15 at 14:21
I tried it, _it does not_, and you can try this on jsfiddle or codepen or as a html page, neither will work .. and codepen, jsfiddle, stackoverflow snippets etc. does not ignore anything important, such as the css for the body tag you implied. – Asons Dec 17 '15 at 14:27
It works fine for me. Very well and simple, i must say... If you want, i can send you by email. – Gabriel Augusto Dec 17 '15 at 19:50
I fixed your solution so it does work. Check _edited_ version and you'll see what you missed before, and that's why I wrote you earlier, to make you take a second look but you clearly missed it. – Asons Dec 18 '15 at 15:47

score -1 · Answer 2 · edited May 23 '17 at 11:59

-1

Use flexbox. Add display: flex to .container-fluid to achieve this.

See also: How do I keep two divs that are side by side the same height?

Do pay attention to browser support for flexbox, especially for IE.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 17 '15 at 14:01

DennisBeverloo

91
6

1

Did you flag this question for duplicate? – Asons Dec 17 '15 at 14:08
No, I don't have the required rep yet. – DennisBeverloo Dec 17 '15 at 14:10
Then do, as you are suppose to, anyone with more than 15 reps. can flag a post. – Asons Dec 17 '15 at 14:13
I can flag the post, but not to have it closed. You need 50 rep for that as you can see here: http://stackoverflow.com/help/privileges/flag-posts. – DennisBeverloo Dec 17 '15 at 14:16
You use the "Other"/"In need of moderator" until 50 reps. is reached – Asons Dec 17 '15 at 14:19
And you don't post an answer when you find a duplicate no matter reps. or not. – Asons Dec 17 '15 at 14:20

score -1 · Answer 3 · answered Dec 17 '15 at 14:03

-1

Normally I would use JavaScript for this task (as most of my projects require a lot of backwards compatibility for older browsers).

Try this JavaScript/jQuery:

sidebar = $('.leftnav');
main = $('.content');

if(sidebar.outerHeight() > main.outerHeight()){
    main.css('height',sidebar.outerHeight());
} else {
    sidebar.css('height',main.outerHeight());
}

answered Dec 17 '15 at 14:03

rorymorris89

1,144
7
14

This is the worst possible way to solve this issue when there are many CSS ways to do it. – Asons Dec 17 '15 at 14:09
thank you but ı only want to solve my problem with css – ydlgr Dec 17 '15 at 14:48
@LGSon can you present me with an IE9 compatible way to do this with CSS alone then, please? Please don't say display:table because we both know that won't perform the same. – rorymorris89 Dec 18 '15 at 15:29
@rorymorris89 Yes, check "Gabriel Augusto" version, it does work now, using floats (and one can do without floats as well), and speaking of `display:table`, that's maybe the best CSS way to do what `flexbox` can do for newer browsers, when a dynamic solution is required and will perform absolutely perfect. – Asons Dec 18 '15 at 15:51
@rorymorris89 ... and as older browsers run on older pc's, the last resort is workloads of script which will make them even more slow than they already are, so even a table structure would to be preferred for this kind of issues, as if you ask me, one of the best features of today is performance/speed. – Asons Dec 18 '15 at 15:57

How can I make my sidebar as long as the content's height %100 on my html page ?

3 Answers3