CSS 100% szerokość przy zmianie rozmiaru przeglądarki

Witam wszystkich Próbuję zbudować układ przy użyciu CSS i mam zamiar zmierzyć się z dziwnym problemem. Cóż dziwne dla mnie. Mam 3 części div o wartości Nagłówek, Stopka i obszar główny. Nagłówek i stopka muszą pozostać na stałej szerokości 100%, natomiast obszar MainContent musi być centralnie ustawiony na 996 pikseli; Wszystko jest w porządku, jednak gdy zmieniam rozmiar okna przeglądarki na szerokość niższą niż 996px, a następnie przewiń zawartość okna w prawo, nagłówek i stopka 100% wydają się być obcięte i nie są już w 100%. Zrobiłem mały scenariusz, aby zilustrować problem (style w linii, aby zachować jego zwartość). Wiem, że mogę dodać przepełnienie: ukryte dla każdego z kontenerów, aby wyłączyć paski przewijania, gdy rozmiar okna zostanie zmieniony. Napisałem też mały kawałek jQuery, aby zmusić diva do powrotu do szerokości, jeśli szerokość spadnie poniżej pewnej szerokości. Moje pytanie dotyczy jednak CSS, czy istnieje lepsza czysta poprawka CSS dla tego problemu? Czy ktoś może wyjaśnić, dlaczego tak się dzieje? Z góry dziękujemy! DotsCCSS 100% szerokość przy zmianie rozmiaru przeglądarki

<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>

Źródło

2010-09-27 DotsC

opublikuj swój kod css i html. –

nie jestem całkowicie jasne, na swój problem, ale można ustawić min-width:996px; na nagłówek i stopka, aby utrzymać je co najmniej tak szeroka jak treść.

Źródło

2010-09-27 15:23:15 JamesMLV

Wypróbuj to i używaj doctype HTML5.

<!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>

Źródło

2010-09-27 16:07:54

FYI - To rozwiązanie działało dla tego, czego szukałem w IE8/IE7. Dodanie do .header i .footer {width: 100%; min-width: 970px}. Dziękuję +1 – Downpour046

CSS 100% szerokość przy zmianie rozmiaru przeglądarki

Odpowiedz

Powiązane problemy