CSS larghezza al 100% sul ridimensionamento del browser

Ciao a tutti Sto cercando di creare un layout utilizzando i CSS e mi trovo di fronte a uno strano problema. Beh, strano per me. Ho 3 div a Header, a Footer e a MainContent area. Intestazione e piè di pagina devono rimanere ad una larghezza costante del 100% mentre l'area del MainContent deve essere fissata centralmente a 996px; Tutto ciò va bene tuttavia quando ridimensiono la finestra del browser a una larghezza inferiore a 996px e poi scorrono il contenuto della finestra a destra l'intestazione 100% e il piè di pagina sembrano essere troncati e non sono più al 100%. Ho buttato giù un piccolo script per illustrare il problema (gli stili sono in linea per mantenerlo compatto). So che posso aggiungere overflow: nascosto a ciascuno dei contenitori al fine di disattivare le barre di scorrimento quando viene ridimensionata la finestra. Ho anche scritto una piccola parte di jQuery per forzare il div a tornare alla dimensione , se la larghezza scende sotto una certa larghezza. Comunque la mia domanda è intorno al CSS, c'è una migliore soluzione CSS pura per questo problema? O qualcuno può spiegare perché questo accade? Grazie in anticipo! DotsCCSS larghezza al 100% sul ridimensionamento del browser

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

fonte

2010-09-27 DotsC

inserisci il codice css e html. –

io non sono del tutto chiare sul problema, ma è possibile impostare min-width:996px; sulla intestazione e piè di pagina per tenerli almeno largo quanto il contenuto.

fonte

2010-09-27 15:23:15 JamesMLV

Prova questo e per favore usa il doctype di 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>

fonte

2010-09-27 16:07:54

FYI - Questa soluzione ha funzionato per quello che stavo cercando in IE8/IE7. Aggiunta a .header e .footer {width: 100%; min-width: 970px}. Grazie +1 – Downpour046

CSS larghezza al 100% sul ridimensionamento del browser

risposta

Problemi correlati