create a scroll bar in a sidebar

Question 1

Question by dan

I’m trying to create a scroll bar inside the #main div so that I can scroll that without scrolling the page or the title but it isn’t working. What am I missing?

My code is as follows:

CSS

#topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position: absolute;
    top: 40px;
    bottom: 0px;
    width: 80px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div id="sidebar">
    <div id="title">
        title
    </div>
    <div id="main">
        <!-- lots and lots of text-->
    </div>
</div>

You can find an example JSFiddle here: http://jsfiddle.net/PTRCr/

Thanks

Answer

Answer by Starx

Starx

CSS are stylesheet whose only purpose are to style document. They cannot investigate a pre-existing elements.

The only ways are whether the size of the div has to be fixed or you have to use some JavaScript to find out the exact height. The ways of which this can be done with CSS have already been presented by other users.

So, here is a way you can do using jQuery

$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());

Demo

Question 2

Question by David B

David B

Currently the table is too wide and causes the browser to add a horizontal scroll bar.

Answer

Answer by T.J. Crowder

T.J. Crowder

If the table content is too wide (as in this example), there’s nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can’t.

Some ways you can alter content to make a table more narrow:

Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
If you’re using CSS white-space: nowrap on any of the content (or the old nowrap attribute,  , a nobr element, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down.
If you’re using really wide margins, padding, borders, etc., try reducing their size (but I’m sure you thought of that).

If the table is too wide but you don’t see a good reason for it (the content isn’t that wide, etc.), you’ll have to provide more information about how you’re styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.

Answer

Answer by Starx

Starx

table { width: 100%; }

Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.

$("#tableid").width($(window).width());

If not, use this snippet

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

You will notice that the width is perfectly covering the page.

The main thing is too nullify the margin and padding as I have shown at the body, then you are set.

Tag: scrollbar

create a scroll bar in a sidebar

Question by dan

Answer by Starx

How can I make a CSS table fit the screen width?

Question by David B

Answer by T.J. Crowder

Answer by Starx

Please fill the form - I will response as fast as I can!