Html width 100%

Cela me rend fou. Que se passe-t-il avec "width: 100%"? Apparemment, cela fonctionne simplement dans IExplore, donc je pense que c'est une de ces choses que Microsoft a inventées.Html width 100%

Mais alors ... comment dire à un élément qui doit prendre l'espace de tous les parents disponibles d'une manière que tous les navigateurs peuvent comprendre?

À la votre?

Source

2010-05-11 vtortola

merci à tous! – vtortola

Un élément de niveau bloc (affichage: bloc;) occupera automatiquement 100% de la largeur de l'élément parent. Vous pouvez redimensionner sa largeur en utilisant des pourcentages ou des pixels. Les éléments en ligne (affichage: inline;) ne peuvent pas avoir leur largeur modifiée.

Si vous voulez quelque chose à prendre tout l'espace des éléments parents, je vous suggère d'essayer quelque chose comme ceci:

.class{ 
    display:block; 
    width:100%; 
}

Source

2010-05-11 23:41:45 Sam152

En plus des pourcentages ou des pixels, vous pouvez utiliser n'importe quelle unité CSS –

J'ai essayé display: block et 100% et cela ne fonctionne pas. lorsque vous passez à afficher: inline, ça marche! –

Si je vous comprends bien, vous demandez si width: 100% est IE uniquement. La réponse est non; il est compris par tous les navigateurs grand public. Source: http://www.w3schools.com/css/pr_dim_width.asp

Source

2010-05-11 23:42:53 Pops

Notez que la largeur: 100% ne fonctionnera pas sur les balises en ligne ... Ainsi, les choses comme ou où la propriété 'display' comme valeur 'inline' ne sont pas affectées.

Si c'est vous nouvelles je recommande de saisir un livre que le HTML n'est pas quelque chose à apprendre ad hoc.

Source

2010-05-11 23:47:31

Largeur: 100% n'est certainement pas une fabrication MS. Comprendre des éléments tels que le modèle en boîte et les éléments en ligne ou en bloc (par exemple, les travées et les divs) vous aidera à comprendre ce que vous verrez. Les différences de navigateur ont moins à voir avec "Largeur: 100%" qu'avec la façon dont les navigateurs interprètent le modèle de boîte pour un élément donné, et en particulier les choses comme les marges, les bordures et le padding.AFAIK, tous les navigateurs respecteront la largeur: 100%, mais comment ils interprètent tout le reste peut avoir un impact sur la quantité d'espace qu'ils donnent comme "100%". Rappelez-vous que 100% correspond à 100% du PARENT et non de la FENÊTRE.

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

Dans ce cas, « deux » sera encore que 50% de la fenêtre large parce qu'il est dans un parent qui est 50% de large. (1 * .5 = 0,5)

Donc, en disant cela, un exemple spécifique de comportement déroutant aiderait grandement les gens à vous donner une réponse spécifique.

Source

2010-05-11 23:56:36

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

Source

2014-03-27 04:31:26 Free

Vous pouvez formater cet article un peu ... :) – summea

Html width 100%

Répondre

Questions connexes