Clever Geek Handbook

Footer encryption


I have a little problem here. I have the following CSS code:

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

Thus, in all pages, I use:

<div class='content'>
    <div class='main-content'>
        //Page content goes here
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

My problem is that the footer does not support the page width if the resolution is less than the content, becoming like this: enter image description here

I created this fiddle which shows the problem as well: http://jsfiddle.net/pmb1vbdh/1/
See how the footer doesn't expand with the table and allows space? How can I solve this? Thank!

+3


source to share


4 answers


It works. Check it.

div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}
      

        
        
        
      

    
<div class='content'>
    <div class='main-content'>
        //Page content goes here
    </div>
</div>
<footer>
    //Footer content goes here
</footer>
Run codeHide result




EDIT for comments in others answer;

demo

+1


source


Try adding right: 0;

to your CSS instead width: 100%

:



footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    ...
}
0


source


Gops AB is right. Correct code.

0


source


The problem is that table

both display:table

ofdiv.content

Solution, set the class to a table.

HTML:

   <div class='content'>
    <div class='main-content'>
        <table class="tab">
            <strong>TABLE</strong>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </table>
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

CSS

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}
table .tab
{
    width: 1500px;
}

0


source






More articles:


All Articles