zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2009, 10:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2009
Beiträge: 1
daigo befindet sich auf einem aufstrebenden Ast
Standard cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet

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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
breite, sticky footer, viewport

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Sticky Footer klebt auf der Seite beim Scrollen nicolafw CSS 5 01.11.2010 12:26
Footer Div verschwindet unter absolut positioniertem div pkipper CSS 6 01.03.2010 12:48
SEHR KOMISCH: content verschwindet im IE, teils vor/nach Scrollen claudia2 CSS 5 14.07.2008 22:33
Scrollbalken verschwindet hinter fixem Footer DieterWelzel CSS 3 19.09.2007 21:44
footer stick alt -> unerwünschter Spalt in FF fidel CSS 34 16.08.2006 13:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:43 Uhr.