CODEWITHSUNDEEP
csspositionpositioningcss-position
Abhishek Gupta
Abhishek Gupta

Reputation: 6615

Fixed non scrolling footer inside a div?

I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able.
According to me there are two ways to do it:

  1. Using position:fixed : Fixed position actually work relative to the browser window but I want position relative to my small div
  2. Using position:absolute : Using bottom:0; I solved the problem initially but the footer scroll with the div text.

HTML:

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

CSS: 

#wrapper{
    width:600px;
    height:500px;    
    border:thin solid #c00;
}
#box {
    width:400px;
    height:300px;
    margin:100px auto;            
    border:medium dashed #c00;
    position:relative;    
    overflow:auto;
}
#content {
    background-color:rgba(0,0,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}​

To See: JSfiddle

How to make the footer fixed for this div?

Upvotes: 6

Views: 7977

Answers (3)

Ana
Ana

Reputation: 37179

Solution: inside your outer #wrapper, create another wrapper for the #box - see http://jsfiddle.net/thebabydino/6W5uq/30/

You style your box wrapper:

.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}

... you take out the width, the margins and position:relative for the #box:

#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}

... and you take into account the borders for the #box when positioning the #footer.

One more thing: position: fixed is not relative to a parent, but to the browser window, so it's not the way to go in this case.

Upvotes: 9

Shivang
Shivang

Reputation: 196

Instead of using the #footer you need to make certain amendments. Try the following:

In #footer add margin-top:10px; instead of position:absolute; bottom:0px;

define this margin-top to the height you want the footer to be below the "some texts" div. This is happening because the footer is being set to the bottom of the div but as there is more text to come and the overflow is on, it sticks to the bottom of the height of the div rather than the bottom of the content

Upvotes: 1

Death
Death

Reputation: 2017

<div id="wrapper">
    <div id='outer_box'>
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

Then add some styles to the elements, as documented here: http://jsfiddle.net/6W5uq/29/

Basically, you make the footer align to the bottom of the outer_box. I've added margin to the content, so you can still see all of it when scrolled down, and a margin to the footer so you can use the scroll bar fully.

Upvotes: 1

Related Questions