html - personalizar - CSS oculta la barra de desplazamiento si no es necesario

ocultar scroll pero que funcione

Question

Estoy tratando de averiguar cómo puedo ocultar el overflow-y:scroll; si no es necesario Lo que quiero decir es que estoy construyendo un sitio web y tengo un área principal en la que se mostrarán las publicaciones y quiero ocultar la barra de desplazamiento si el contenido no excede el ancho actual.

Además, mi segunda pregunta. Quiero hacerlo para que cuando las publicaciones superen el ancho actual, el ancho aumentará automáticamente y el contenido no saldrá de la caja.

¿Alguien tiene una idea de cómo hacer esto?

Área de mensajes:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Contenedor del sitio web principal:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

Answer 1

.container {overflow: auto;} hará el truco. Si desea controlar la dirección específica, debe establecer auto para ese eje específico. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

El código anterior ocultará cualquier desbordamiento en el eje x y generará una barra de desplazamiento cuando sea necesario en el eje y. Pero debe asegurarse de que la altura predeterminada del contenido sea menor que la altura del contenedor; Si no, la barra de desplazamiento no se ocultará.

Answer 2

Establezca la propiedad overflow-y en auto , o elimine la propiedad por completo si no se hereda.

Here hay un ejemplo de trabajo de ambos problemas resueltos.

Answer 3

Puede usar tanto .content como .container para desbordar: auto. Significa que si el texto se excede automáticamente, el desplazamiento vendrá del eje x y del eje y. (no es necesario dar un eje x separado y el eje y comúnmente da un desbordamiento: automático)

.content {desbordamiento: auto;}

Answer 4

Puedes usar overflow:auto;

También puede controlar los ejes x o y individualmente con las propiedades overflow-x y overflow-y .

Ejemplo:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}