css - redimensionar - Ancho: 100% sin barras de desplazamiento

texto ajustable css

Question

Intento hacer que una parte de mi página web se ajuste al ancho del navegador, para esto estoy usando width: 100% , el problema es que muestra barras de desplazamiento y no puedo usar overflow-x: hidden; porque ocultará parte del contenido, entonces, ¿cómo puedo solucionarlo?

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    -webkit-user-select: text;
}

Answer 1

Debes eliminar los margins en el elemento #news

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

Si esto no funciona, es posible que tenga margin y padding establecidos en el elemento en sí. Su div , si eso es lo que está utilizando, puede tener estilos aplicados, ya sea en su hoja de estilo o en los estilos de navegador base. Para eliminarlos, establezca los márgenes específicamente en 0 y agregue !important también.

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}

Answer 2

La respuesta es que tiene márgenes establecidos que harán que el div sea más amplio que el 100%; de ahí las barras de desplazamiento.

Si puedes librarte de los márgenes hazlo! Sin embargo, a menudo querrás los márgenes. En este caso, envuelva todo en un contenedor div y establezca los márgenes en 0 con ancho al 100%.

Answer 3

Parece que ha establecido el ancho al 100%, pero también hay márgenes que fuerzan el ancho para expandirse más allá de eso.

Intenta buscar en Google para "css flexible (two / three-collumn) layouts".

Aquí hay un ejemplo,

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

y el CSS

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

El #menu div , se alineará a la izquierda y tendrá un ancho estático de 200px . El #main div , "comenzará" debajo de #main , pero debido a que tiene un 200px padding (también puede ser un margen) su contenido y los elementos secundarios comenzarán, donde termina el #main .

No debemos establecer #main en un ancho porcentual, (por ejemplo, 100% ) porque los 200 píxeles de relleno izquierdo se agregarán a eso, y se rompe el diseño agregando barras de desplazamiento al eje X.

Answer 4

Porque estás usando position: absolute , en lugar de usar:

width: 100%; margin-right: 10px; margin-left: 10px

Deberías usar:

left: 10px; right: 10px

Eso hará que su elemento tome todo el ancho disponible, con 10px espacio de 10 10px a la izquierda y a la derecha.

Answer 5

Tuve un problema similar con un elemento de posición absoluta, y quería usar el ancho al 100%. Este es el enfoque que utilicé y resolvió mi problema:

box-sizing=border-box

De lo contrario, siempre tuve un poco de contenido y relleno al pasar la barra de desplazamiento.