CSS 100% width auf browser resize

Hallo zusammen ich versuche ein Layout mit CSS zu erstellen und ich stoße auf ein seltsames Problem. Nun seltsam für mich. Ich habe 3 divs a Header, ein Footer und ein MainContent Bereich. Header und Footer müssen auf einer konstanten Breite von 100% bleiben, während der MainContent-Bereich zentral auf 996px festgelegt werden muss; Das ist alles in Ordnung, aber wenn ich die Größe des Browserfensters auf eine Breite unter 996px ändere und dann den Inhalt des Fensters nach rechts scrolle, scheint die 100% Kopf- und Fußzeile abgeschnitten zu sein und nicht mehr 100%. Ich habe ein kleines, blankes Skript geschrieben, um das Problem zu illustrieren (Stile inline, um es kompakt zu halten). Ich weiß, dass ich Überlauf hinzufügen kann: versteckt zu jedem der Container, um die Bildlaufleisten zu deaktivieren, wenn die Größe des Fensters geändert wird. Ich habe auch ein kleines Stück jQuery geschrieben, um die div's zurück auf die Breite zu zwingen, wenn die Breite unter eine bestimmte Breite fällt. Wie auch immer, meine Frage bezieht sich auf das CSS. Gibt es einen besseren CSS-Fix für dieses Problem? Oder kann jemand erklären, warum das passiert? Vielen Dank im Voraus! DotsCCSS 100% width auf browser resize

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>div width test</title> 
</head> 
<body style="border:none; margin:0; padding:0; height:100%; width:100%"> 

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div> 

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto"> 
     <div id="inner-content"> 
      CONTENT OF THE PAGE HERE 
     </div> 
    </div> 
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div> 
</body>

Quelle

2010-09-27 DotsC

posten Sie Ihre CSS-und HTML-Code. –

Ich bin nicht ganz klar auf das Problem, aber Sie können min-width:996px; auf der Kopf- und Fußzeile setzen sie mindestens so breit wie der Inhalt zu halten.

Quelle

2010-09-27 15:23:15 JamesMLV

Versuchen Sie dies, und verwenden Sie bitte den HTML5-Doctype.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
      body{margin:0;text-align:center;} 
      .header,.content,.footer{text-align:left;clear:both;margin:0 auto;} 
      .header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;} 
      .content{width:996px;height:512px;background-color:red;} 
     </style> 
     <title>Index</title> 
    </head> 
    <body> 
     <div class="header"> 
      Header stuff here 
     </div> 
     <div class="content"> 
      Page content stuff here 
     </div> 
     <div class="footer"> 
      and your footer... 
     </div> 
    </body> 
</html>

Quelle

2010-09-27 16:07:54

FYI - Diese Lösung arbeitete für das, was ich suchte In IE8/IE7. Hinzufügen zu .header und .footer {width: 100%; Mindestbreite: 970px}. Danke +1 – Downpour046

CSS 100% width auf browser resize

Antwort

Verwandte Themen