Html larghezza 100%

Questo mi sta facendo dadi. Cosa succede con “width:100%” ? A quanto pare funziona in IExplore, quindi penso che sia una di quelle cose che Microsoft ha reso fino.

Ma poi… come si fa a dire a un elemento che è a disposizione dei genitori lo spazio in modo che tutti i browser in grado di capire?

Applausi?

grazie a tutti!

OriginaleL’autore vtortola | 2010-05-11

5 Replies
  1. 12

    Un elemento di livello (display:block;) saranno automaticamente fino al 100% della larghezza dell’elemento padre. È possibile ridimensionare la larghezza utilizzando le percentuali o pixel. Inline elementi (display:inline;) non possono avere la loro larghezza modificato.

    Se volete qualcosa di assumere tutti gli elementi padre di spazio ti suggerisco di provare qualcosa di simile a questo:

    .class{
        display:block;
        width:100%;
    }
    Oltre a percentuale o pixel è possibile utilizzare qualsiasi CSS unità
    Ho provato display: block e il 100% e non funziona. quando si modifica per display: inline, funziona!

    OriginaleL’autore Sam152

  2. 4

    Larghezza:100% non è certamente un MS di fabbricazione. Capire le cose come modello di scatola e inline vs blocco (e.g si estende vs div) elementi che vi aiuteranno a capire alcune delle cose che si possono vedere. Le differenze tra i browser hanno meno a che fare con la “Width:100%” che con come i browser interpretano il modello box per un dato elemento, e in particolare cose come margini, bordi e padding.Per quanto ne so, tutti i browser onore width:100%, ma come si interpretano tutto il resto può avere un impatto quanto spazio danno come “100%”.

    Ricordare che il 100% si 100% del PADRE e non la FINESTRA.

     <body>
       <div id = "one" style="width:50%">
         <div id = "two" style = "width:100%" />
       </div>
     </body>

    In questo caso, “due” saranno ancora solo il 50% della finestra ampia, perché è in un genitore che è il 50% di larghezza. (1 * .5 = .5)

    Così, dicendo che, un esempio concreto di sconcertante comportamento sarebbe di grande aiuto la gente a dare una risposta specifica.

    OriginaleL’autore Jim L

  3. 1

    Nota che larghezza:100% non funziona su tag inline… Quindi le cose come o dove la proprietà ‘display’ valore ‘inline’ non sono interessate.

    Se thats notizie a voi mi raccomando, afferrando un libro come HTML non è qualcosa da imparare ad hoc.

    OriginaleL’autore Frank Schwieterman

  4. -2
    html {
    width:100%;
    }
    
    body {
    background-color:#f2f2f2;
    margin:0;
    padding:0;
    }
    
    a {
    color:#ec3f3f;
    text-decoration:none;
    font-weight:400;
    font-style:normal;
    }
    
    a:hover {
    color:#262626;
    text-decoration:none;
    font-weight:400;
    font-style:normal;
    }
    
    p,div {
    margin:0!important;
    }
    
    table {
    border-collapse:collapse;
    }
    
    ::-moz-selection,::selection {
    background:#ec3f3f;
    color:#fff;
    }
    
    .ReadMsgBody,.ExternalClass {
    width:100%;
    background-color:#f2f2f2;
    }
    
    @media only screen and max-width640px{
    img[class=img_scale] {
    width:100%!important;
    height:auto!important;
    }
    
    img[class=divider] {
    width:440px!important;
    height:2px!important;
    }
    
    table[class=spacer] {
    display:none!important;
    }
    
    td[class=center] {
    text-align:center!important;
    }
    
    table[class=full] {
    width:400px!important;
    margin-left:20px!important;
    margin-right:20px!important;
    }
    
    table table,td[class=full_width] {
    width:100%!important;
    }
    
    div[class=div_scale],table[class=table_scale],td[class=td_scale] {
    width:440px!important;
    margin:0 auto!important;
    }
    }
    
    @media only screen and max-width479px{
    img[class=img_scale] {
    width:100%!important;
    height:auto!important;
    }
    
    img[class=divider] {
    width:280px!important;
    height:2px!important;
    }
    
    table[class=spacer] {
    display:none!important;
    }
    
    td[class=center] {
    text-align:center!important;
    }
    
    table[class=full] {
    width:240px!important;
    margin-left:20px!important;
    margin-right:20px!important;
    }
    
    table table,td[class=full_width] {
    width:100%!important;
    }
    
    div[class=div_scale],table[class=table_scale],td[class=td_scale] {
    width:280px!important;
    margin:0 auto!important;
    }
    }
    Se si desidera formattare questo post un po’… 🙂

    OriginaleL’autore Free

Lascia un commento