Html ancho 100%

Esto me está volviendo loco. ¿Qué sucede con "ancho: 100%"? Aparentemente solo funciona en IExplore, así que creo que es una de esas cosas que inventó Microsoft.Html ancho 100%

Pero entonces ... ¿cómo se le dice a un elemento que tiene que tomar el espacio de todos los padres disponibles de una manera que todos los navegadores puedan entender?

¿Salud?

Fuente

2010-05-11 vtortola

gracias a todos! – vtortola

Un elemento de nivel de bloque (display: block;) tomará automáticamente el 100% del ancho del elemento principal. Puede cambiar el ancho de su ancho usando porcentajes o píxeles. Los elementos en línea (pantalla: en línea;) no pueden tener su ancho modificado.

Si quieres algo para ocupar todo el espacio de elementos padre le sugiero que pruebe algo como esto:

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

Fuente

2010-05-11 23:41:45 Sam152

Además de porcentajes o píxeles, puede usar cualquier unidad de CSS –

He intentado mostrar: bloque y 100% y no funciona. cuando cambia a mostrar: en línea, ¡está funcionando! –

Si he entendido bien, estás preguntando si es width: 100% IE-solamente. La respuesta es no; es entendido por todos los navegadores mainstream. Fuente: http://www.w3schools.com/css/pr_dim_width.asp

Fuente

2010-05-11 23:42:53 Pops

Tenga en cuenta que el ancho: 100% no funcionará en las etiquetas en línea ... Por lo tanto, no se verán las cosas como "la propiedad" como valor "en línea".

Si estas son noticias para ti, te recomiendo que tomes un libro, ya que el HTML no es algo para aprender adhoc.

Fuente

2010-05-11 23:47:31

Ancho: 100% ciertamente no es una fabricación de MS. Comprender elementos como el modelo de recuadro y los elementos en línea y en bloque (por ejemplo, los intervalos frente a los segmentos) lo ayudará a comprender algo de lo que verá. Las diferencias del navegador tienen menos que ver con "Ancho: 100%" que con la forma en que los navegadores interpretan el modelo de caja para un elemento dado y, en particular, como márgenes, bordes y relleno. Todos los navegadores respetarán el ancho: 100%. pero la forma en que interpretan todo lo demás puede afectar la cantidad de espacio que otorgan como "100%".

Recuerde que el 100% es el 100% del PADRE, no de la VENTANA.

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

En este caso, "dos" será todavía sólo el 50% de la ventana amplia, ya que se encuentra en un padre que es un 50% de ancho. (1 * .5 = .5)

Por lo tanto, diciendo que un ejemplo específico de comportamiento desconcertante sería de gran ayuda a las personas a darle una respuesta específica.

Fuente

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

Fuente

2014-03-27 04:31:26 Free

Es posible que desee formatear esta publicación un poco ... :) – summea

Respuesta

Cuestiones relacionadas