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

Tags: , , ,

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

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

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