Set height of #side-bar

Set height of #side-bar

JonathanTheBlack 27 Nov 2009 22:43

For some reason, the height attribute does not work when I try to set it's height to 100% of the page. Basically, I want my side nav bar to extend to the bottom of the page all the time and not expand only when you add items to the menu. Am I trying to set the height in the wrong css element or something?

http://rpg-bestiary.wikidot.com/monster:desert-wasp-stabber

The site in question if you need to look at the css.

Last edited on 27 Nov 2009 22:46 by JonathanTheBlack + Show more

Re: Set height of #side-bar

RobElliott 27 Nov 2009 23:01

As well as height:100%, add position:absolute to the #side-bar rule. The combination of the two should give you a full-height side bar.

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Last edited on 27 Nov 2009 23:02 by RobElliott + Show more

Re: Set height of #side-bar

Ed Johnson 27 Nov 2009 23:09

Yea, height: 100% in this case doesn't work. I've struggled with this and haven't found a decent solution. I think the best you can do is set a min-height value for the side bar and pick a number that looks good on the majority of your pages. The page you referenced looked OK at min-height: 800px;

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Set height of #side-bar

JonathanTheBlack 27 Nov 2009 23:24

100% may not work, but as I've found in another place, 99% does! :D

Thanks for the help!

Re: Set height of #side-bar

JonathanTheBlack 27 Nov 2009 23:26

Except now the editing box is cut off. >_< Guess I'll have to dig into that css and see about floating it right or something and reducing it's width.

Re: Set height of #side-bar

RobElliott 27 Nov 2009 23:31

Using Firebug I can see that you are not using my solution of adding position:absolute. Have you tried it?

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Set height of #side-bar

JonathanTheBlack 27 Nov 2009 23:38

Yeah, it's in there. Maybe you got a cached version, I dunno.

Re: Set height of #side-bar

RobElliott 27 Nov 2009 23:43

Yes I see it, and it seems to do what you wanted. So presumably everything is now solved?

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Set height of #side-bar

JonathanTheBlack 27 Nov 2009 23:46

No, everything that shows up when you hit the edit button is cut off on the left by the side-bar. Do you know the highest level div id for the edit box?

Re: Set height of #side-bar

RobElliott 27 Nov 2009 23:56

Sorry, can't see what you are talking about, but if main content is being cut off due to the width of the side bar then the solution would be (apart from reducing the side bar width) to move the #main-content margin-left property to something like margin-left: 20em;

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Set height of #side-bar

JonathanTheBlack 28 Nov 2009 00:08

It wasn't all the main content. Just the editor box. =/

Re: Set height of #side-bar

RobElliott 28 Nov 2009 00:13

Do you mean the the page editor? No-one else can edit the page but you so we can't see what you are talking about.

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Set height of #side-bar

JonathanTheBlack 28 Nov 2009 00:16

Yes, the page editor. When I hit the edit button, it was clipped underneath the sidebar.

Re: Set height of #side-bar

JonathanTheBlack 28 Nov 2009 00:20

Just got it to work exactly how I want it to. It was all the %'s here and there screwing it up. So I made the sidebar 200px and set the margin-left on #main-content to 205 px and boom. Everything is where I want it now!

Re: Set height of #side-bar

JonathanTheBlack 28 Nov 2009 00:29

Thanks for all your help! Frustrating how simple a solution it was and I was looking all over the place for something far more complex than I needed to.

Re: Set height of #side-bar

RobElliott 28 Nov 2009 10:29

Frustrating how simple a solution it was

hehe, yes, that is so often the case. Glad you got it sorted out.

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.