XHTMLforum - Einzelnen Beitrag anzeigen - cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet

daigo · #1 (**permalink**) 19.05.2009, 10:56

Schönen guten Tag zusammen!

Ich nutze den CSS Sticky Footer von cssstickyfooter.com. Dieser Footer klappt auch wunderbar und ist super einzubauen. Leider habe ich folgendes Problem mit ihm:

Ich möchte tabellarische Daten darstellen, also nutze ich eine <table>. Diese Tabelle enthält aber sehr viele Daten und ist breiter als der Viewport. Diese Tatsache führt dazu, dass der Footer zwar angezeigt wird, aber "nur" zu 100% der Browserbreite, d.h., dass der Footer verschwindet, wenn man horizontal nach rechts scrollt.

Eigentlich ist es nicht schlimm, dass der Text im Footer "verschwindet", jedoch hört auch der background auf, was natürlich das Design zerstört.

Hier ist mein Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>example</title>
<style type="text/css" media="screen">
/* RESET */
* {
    margin:             0;
    padding:            0;
}
/* CLEAR FIX*/
.clearfix:after {
    content:            ".";
    display:            block;
    height:             0;
    clear:              both;
    visibility:         hidden;
}
.clearfix {
    display:            inline-block;
}
/* HIDES FROM IE-MAC \*/
* html .clearfix {
    height:             1%;
}
.clearfix {
    display:            block;
}

/* GLOBAL SETTINGS */
html,
body,
#page_wrapper {
    height:             100%;
}

#masthead {
    background-color:   #d3a;
}

#page {
    padding-bottom:     75px;
    padding-bottom:     75px;   /* must be same height as the footer */
}

/* CONTENT */
#content {
    margin-left:        240px;  /* must be same width as the sidebar (+ extra margin)*/
    background-color:   #2bb;
}

/* SIDEBAR */
#sidebar {
    position:           relative;
    float:              left;
    width:              220px;
    background-color:   #c01;
}

/* FOOTER */
body > #page_wrapper {
    height:             auto;
    min-height:         100%;
}
#footer_wrapper {
    background:         #fc0;
    position:           relative;
    margin-top:         -75px; /* negative value of footer height */
    height:             75px;
    clear:              both;
}

</style>
</head>
<body>
<div id="page_wrapper" class="clearfix">
    <div id="page">
        <div id="masthead">
            <h1>Company name</h1>
        </div><!-- /masthead -->

        <div id="content_wrapper">
            <div id="sidebar" class="clearfix">
                <ul>
                    <li>Sample
                        <ul>Item 0</ul>
                        <ul>Item 1</ul>
                        <ul>Item ...</ul>
                    </li>
                </ul>
            </div><!-- /sidebar -->

            <div id="content">
                <h2>Content Heading</h2>

                <div style="width:2000px;height:200px;background-color:#9c0;">expaaaaaand</div>

            </div><!-- /content -->

        </div><!-- /content_wrapper -->
    </div><!-- /page -->
</div><!-- /page_wrapper -->
<div id="footer_wrapper">
    <p>&copy; 2009</p>
</div><!-- /footer_wrapper -->
</body>
</html>

Könnt Ihr mir einen Tipp geben, wie ich es erreichen kann, dass die Breite des Footers so breit ist, wie der Viewport breit ist?

Vielen Dank für Eure Hilfe!

MfG
DAIGO