div crollano intorno intestazione

Ho un paio di div annidati: stilediv crollano intorno intestazione

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

avvolgitore: width: 780px; margin: 20px auto; border: solid black 5px;
stile intestazione: position: relative; min-height: 125px;
carrozzeria: position: relative;
stile contenuto: position: absolute; left: 50px; top: 0px;

Ho un sacco di elementi html nel div del contenuto e per qualche ragione il div del corpo e il div del wrapper stanno collassando attorno all'intestazione e il div del contenuto si blocca da solo se non setto un'altezza fissa per il div del corpo . Gli unici elementi float che ho sono nell'intestazione.

EDIT:

Se rimuovo il div contenuti (e rilasciare gli elementi HTML direttamente nel corpo) corpo div ferma collasso! Cercando di capire perché - indovina è dovuto alla posizione: assoluta del contenuto div.

Qualche indizio sul perché questo sta accadendo e su come risolverlo?

Ho dato un'occhiata a this question ma non sembra funzionare per me (o forse sto cancellando nel posto sbagliato ...).

fonte

2009-03-02 JohnIdol

È necessario fornire un css barebone che si sta utilizzando. – cletus

hai ragione - fatto! :-) – JohnIdol

In questo caso non è necessario utilizzare il posizionamento assoluto o relativo.

Quanto segue ottiene ciò di cui hai bisogno con una minima quantità di cianfrusaglie.
Colori perché mi piace il colore, e così dovresti!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>Page Title</title> 
     <style type="text/css" media="screen"> 
    #wrapper { 
     width: 780px; 
     margin: 20px auto; 
     border: solid black 5px; 

    } 
    #header { 
     min-height: 125px; 
     overflow:hidden; 

    } 
    #body { 
     background-color:red; 

    } 
    #content { 
     margin-left: 50px; 
     margin-top: 0px; 
     background-color:pink; 

    } 
.floatie { float:left; width:40px; height :40px; 
    margin:5px; background-color:#fe0;} 

     </style> 


    </head> 
    <body> 



     <div id="wrapper"> 
      <div id="header"> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
       <div class="floatie"></div> 
      </div> 

      <div id="body"> 
      <div id="content"> 

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore 
        magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea 
        commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint occaecat 
        cupidatat non proident, sunt in culpa qui officia 
        deserunt mollit anim id est laborum.</p> 
      </div> 
      </div> 
     </div> 

    </body> 
</html>

fonte

2009-03-02 10:15:14 garrow

Il tag FORM orfano mostra il tag modulo estraneo – random

fisso! grazie per questo ... (riutilizzando il codice di esempio FTW!) – garrow

ho aggiunto questo codice a: http://jsfiddle.net/BkSmJ/ – Cymbals

Provare a pulire dopo gli elementi flottati all'interno dell'intestazione.

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    <div style="clear:both;"></div> <!-- Or use a clearfix... --> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

Fintantoché l'elemento di compensazione si trova all'interno del div di contenimento, dovrebbe ottenere ciò che si desidera.

fonte

2009-03-02 00:24:31

Aggiungere lo stile "clear: both" al proprio div con "body" id. Potresti anche aggiungere un div con questo stile subito dopo "bunch of float div" e prima di chiudere il tag di header div.

fonte

2009-03-02 00:24:52 Stiropor

Aggiunta chiara: sia al div del corpo posizionerà il div del corpo solo nella posizione corretta, ma il div di intestazione sarà ancora collassato perché il suo contenuto non è nel flusso normale. –

Quando si desidera cancellare qualcosa, è necessario anche farlo galleggiare per farlo funzionare correttamente. Quindi avrai bisogno.

#header { clear: both; float: left; } 
#body { clear: both; float: left; }

fonte

2009-03-02 00:33:03 Alex

Io uso questo stile per gli elementi di compensazione:

.Clear { clear: both; height: 0; overflow: hidden; }

Posizionare un div compensazione nell'intestazione, per dare la dimensione di elemento intestazione:

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    <div class="Clear"></div> 
    </div> 

    <div id="body"> 
    <div id="content"> 
     <!-- a bunch of html controls here --> 
    </div> 
    </div> 
</div>

Come regolare l'altezza della radura l'elemento a zero fa sì che non assuma nessuno spazio da solo. Lo stile di overflow è tale che IE non gli darà un'altezza nonostante l'altezza sia impostata su zero. IE ha la strana idea che ogni elemento debba essere alto almeno un carattere, impostando l'overflow: nascosto; mantiene l'altezza a zero anche se il contenuto dell'elemento è alto un carattere in IE.

fonte

2009-03-02 00:34:04 Guffa

Non sono un fan dell'uso di "clear: both" se non è completamente necessario. Una soluzione migliore è l'impostazione della proprietà "overflow" del DIV comprendente su "auto".

provare qualcosa di simile:

#header { float: left; overflow: auto; }

fonte

2009-03-02 00:35:24 Allan

Questo non funziona in es .: – Alex

Prova questo. Nota: l'overflow nascosto sul div dell'header risolve la necessità di un div di compensazione. Nota bene perché stai usando il posizionamento relativo + assoluto per il contenuto. Questo è meglio gestito con i margini imho.

<html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; } 
    #header { overflow: hidden; background-color: yellow; } 
    #header div { float: right; border: 2px solid red; } 
    #body { position: relative; } 
    #content { position: absolute; left: 50px; top: 0px; } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
     <div>One</div> 
     <div>Two</div> 
     <div>Three</div> 
     </div> 
     <div id="body"> 
     <div id="content"> 
      <p>This is some text</p> 
     </div> 
     </div> 
    </div> 
</body> 
</html>

fonte

2009-03-02 00:42:58 cletus

Se si desidera #content di presentarsi entro i confini di confine di #wrapper provare questo swap su per le dimensioni, dopo aver rimosso position:relative da #body (o rimosso che DIV del tutto):

#header{position: relative; overflow:hidden; clear:both;} 
#content{position:relative; left:50px; top:0px;}

In questo modo sarete in grado di vedere #conten mostrare nel wrapper ma sotto #header.

Potrebbe accadere perché non c'è davvero niente per #content da sporgere da sotto. #header, quando è stato impostato su relativo, il tipo di scompare per il sotto, anche se #body è stato quindi impostato su assoluto con i discendenti di esso impostato su relativo.

La modifica di # contenuto da position:absolute a position:relative prevede che si trovi sotto il DIV precedente, che in questo caso era #header.

fonte

2009-03-02 01:16:18 random

Grazie - posizione: relativo al tipo di #content (senza rimuovere il div #body, mi serve!) – JohnIdol

div crollano intorno intestazione

risposta

Problemi correlati