CODEWITHSUNDEEP
csscss-position
junihh
junihh

Reputation: 502

How to set a fixed position at top of div and don't scroll

I have a div with overflow-y:auto as container with two more div's: One for the title and one for the content.

I need to scroll the container but the title has to be static at top of it. Something like this:

<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        ...
    </div>
</div>

I tried position:absolute to .table-title but doesn't stuck at top.

Here a demo: http://jsfiddle.net/junihh/faqm85xy/1/

How to set the fixed position of .table-title at top of the container?

Thanks to any help or comment.

Upvotes: 0

Views: 1707

Answers (2)

Stickers
Stickers

Reputation: 78746

I think you only want to make the content area scrollable, not the title. And no fixed position is needed in this case.

.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}


.table-container {
    margin: 0 auto;
    width: 350px;
    background-color: #DBDBDB;
}
.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}
h2, p {
    margin: 0;
    padding: 10px 15px;
    font: normal 1em/1 Arial, Helvetica, sans-serif;
}
h2 {
    font-size: 1.2em;
    color: #FFF;
    font-weight: bold;
}
p {
    line-height: 140%;
}
p:nth-of-type(odd) {
    background-color: #EBEBEB;
}
<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
    </div>
</div>

Update Demo: http://jsfiddle.net/7ngg8f03/

Upvotes: 1

Norman Breau
Norman Breau

Reputation: 2417

Fixed positioning is relative to the window of browser.

Instead you probably want absolute positioning. absolute positioned elements are positioned relative to the the first parent that isn't statically positioned.

So by making .table-container position: relative; we can make the title position relative to its container.

Note: absolute position elements require top or bottom and left or right to be set. Otherwise you will end up with some unconsistent behaviour across browsers.

The following CSS should help you out:

.table-container {
    position: relative;
    /* Set padding-top to the total height of .table-title to fix the scrollbar */
    padding-top: 67px;

    /* Set width & height to the desirable size. */
    width: 300px;
    height: 300px;
}

.table-title {
    position: absolute;
    top: 0px;
    left: 0px;
    /* set background color so that it isn't transparent. */
    background-color: white;
}

.table-content {
    overflow-y: auto;
}

Here is my jsFiddle: http://jsfiddle.net/y3k0h9cx/

Upvotes: 0

Related Questions