100% Breite + horizontal und vertikal scrollen

Meine Website hat eine Breite von 100%. Meine Site enthält häufig breite Tabellen, und manchmal werden diese Tabellen breiter als die 100% (des Ansichtsfensters).100% Breite + horizontal und vertikal scrollen

Wenn dies geschieht, wird eine horizontale Bildlaufleiste angezeigt (was völlig natürlich ist). Aber wenn ich horizontal scrolle, folgt das Menü nicht der Breite der breitesten Tabelle.

Ich habe verschiedene Codebeispiele ausprobiert, die im Internet verfügbar sind, aber keine scheint mir den ganzen Weg zu helfen. Unten ist mein letzter Code, und es funktioniert mit dem horizontalen Scrollen (wegen der festen Position des Menüs). Wenn die Seite jedoch "hoch" wird und ein vertikales Scrollen erforderlich ist, ist das Menü immer an der ursprünglichen Ansichtsfensterposition sichtbar und fixiert (wiederum natürliches Verhalten).

Gibt es eine Möglichkeit, das Verhalten so zu machen, wie es jetzt beim horizontalen Scrollen, aber normal beim vertikalen Scrollen funktioniert?

Wenn jemand irgendwelche Vorschläge hat, wäre ich mehr als dankbar.

<!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" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     .myTable { width: auto; float: left; width: 100%; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 

     .myMenu { text-align: center; background: #666666; float: left; width: 100%; height: 30px; margin-bottom: 20px; color: #fff; } 
     .myMenu ul { margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; width: 300px; list-style-type: none; text-align: center; } 
     .myMenu ul li { float: left; padding: 5px 20px 5px 20px; } 

       body       { margin:0; padding:50px 0 0 0; } 
       div#header      { top:0; left:0; width:100%; height:50px; position: fixed; } 
       * html body      { overflow:hidden; } 
       * html div#content  { height:100%; overflow:auto; } 

    </style> 
</head> 
<body> 
     <div id="header"> 
       <div class="myMenu"> 
         <ul> 
           <li>Item 1</li> 
           <li>Item 2</li> 
           <li>Item 3</li> 
         </ul> 
       </div> 
     </div> 
     <div id="content"> 
       <table class="myTable"> 
         <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
       </table> 
     </div> 
</body> 
</html>

EDIT: Ich schaffte es, um es in IE8 zu arbeiten, aber IE7 leidet immer noch an der gleichen Krankheit :(

Was es in IE8 Arbeit gemacht tatsächlich veränderte Breite: 100%; in min-width: 100% ;, aber IE7 scheint nicht zu stimmen

Jeder

<!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" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     body { margin: 0px; padding: 0px; } 
     #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #myMenu { width: auto; min-width: 100%; background: #666; float: left; margin-bottom: 15px; } 
     #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; } 
     #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; } 

     .myTable { width: auto; float: left; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 
     #filter { margin-bottom: 10px; border: 1px solid red; height: 50px; min-width: 100%; float: left; } 

    </style> 
</head> 
<body id="myBody"> 
<div id="container"> 
    <div class="myMenu" id="myMenu"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
    <div id="filter"> 
some content 
    </div> 
      <table class="myTable potential"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 
    <table class="myTable potential" id="myTable"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
    </table> 

    </div> 
</body> 
</html>

Quelle

2010-11-26 iafiawik

Möchten Sie, dass sich das Menü bewegt (wie in der Position des Änderungsmenüs) oder entsprechend der Breite der breitesten Tabelle (wie bei der Erhöhung der Menübreite) wächst? – Bazzz

Hallo, es ist mir egal, solange es aussieht, als würde das Menü 100% der Bildschirmbreite abdecken. Ich denke, vorzugsweise, bewegen Sie die Menüposition. – iafiawik

Vielleicht vermisse ich den Punkt, aber ich habe Ihren Code in Firefox 3.6.12 Chrome 7.0.517.44, IE 8 und http://jsfiddle.net/RfWCd/ versucht und alle produzieren das gleiche Ergebnis, in dem die horizontale Bildlaufleiste es macht sehen aus wie die Tabelle nach links geht, bleibt das Menü wo es ist und füllt daher 100% des Ansichtsfensters. Können Sie mir bitte sagen, wie Sie Ihr Problem reproduzieren können? Oder missverstehe ich deine Anforderung? – Bazzz

Antwort auf meine eigene Frage:

Nach Stunden und Tagen zu versuchen, ich habe es schließlich in beide IE7/IE8 zu arbeiten, das war das Ziel. Die einzige Einschränkung gilt für IE7, bei dem das Menü nicht zentriert ist, wenn die Tabelle zu breit ist.

Die Lösung bestand darin, eine minimale Breite anstelle der Breite zu verwenden, sodass der Inhalt außerhalb des Ansichtsfensters wächst, aber den gesamten Bildschirm ausfüllt, wenn der Inhalt weniger breit ist als das Ansichtsfenster.

Ich werde den Code hier posten, wenn jemand in der Zukunft wird das gleiche schreckliche Problem gegenüber:

<!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" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     body { margin: 0px; padding: 0px; min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #myMenu { background: #666; float: left; min-width: 100%; } 
     #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; } 
     #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; } 

     .myTable { width: auto; float: left; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 
     #filter { background: yellow; } 

html>body #myMenu { *min-width: auto; background: #666; *float: none; margin-bottom: 15px; } 


    </style> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
</head> 
<body id="myBody"> 
<div id="container"> 
    <div class="myMenu" id="myMenu"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
    <div id="filter"> 
some content 
    </div> 
      <table class="myTable potential"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 
    <table class="myTable potential" id="myTable"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 

    </div> 
</body> 
</html>

Danke für die Unterstützung!

Quelle

2010-12-02 10:22:03 iafiawik

Das beste, was ich tun konnte nach dem Spiel war sett.? die gleiche explizite Breite sowohl am Körper als auch am div.myMenu (z.B. 1800px oder 150em). Um dies zu tun, müssten Sie jedoch wissen, welche Seiten die großen Tabellen hatten und in etwa wie weit sie erstellt wurden. Problematisch erwarte ich.

Quelle

2010-11-26 13:34:45

Leider ist das keine funktionierende Lösung für mich, da die Daten in Tabellen dynamisch sind. – iafiawik

Wie wäre es mit div.myMenu eine eingestellte Höhe und dann mit einem 1px breiten Bild die gleiche Höhe und Farbe wie Ihr div um den Hintergrund zu fälschen? –

Das hätte funktionieren können, aber ich brauche die Menüpunkte, um zentriert zu bleiben (was bei dieser Lösung nicht der Fall ist). – iafiawik

100% Breite + horizontal und vertikal scrollen

Antwort

Verwandte Themen