|
|||
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>© 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 |
Sponsored Links |
Stichwörter |
breite, sticky footer, viewport |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |