mdn - CSS 100% de ancho pero evita la barra de desplazamiento

overflow en html css

Question

Esta es probablemente una variación de algo que se ha resuelto docenas de veces, pero CSS realmente me hace sentir como un tonto.

Estoy tratando de construir un widget que pueda posicionarse y dimensionarse de varias maneras. Es un diseño bastante simple: encabezado de altura fija, pie de página de altura fija y un cuerpo que ocupa el espacio restante. El ancho y la altura total varía. El contenido del cuerpo necesita desplazarse. Tengo el tamaño total del contenedor, el encabezado, el pie de página y el cuerpo.

Pero lo que quiero es que el cuerpo se desplace cuando necesite SIN reducir el contenido a la izquierda cuando aparece la barra de desplazamiento. Es decir, quiero que el cuerpo sea lo más ancho posible, MENOS, la barra de desplazamiento que estaría allí si fuera necesario desplazarse, de modo que cuando sea necesario desplazarse no se contraiga. En efecto, quiero esto:

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

Quiero que el contenido que podría desplazarse sea lo más ancho posible, MENOS el ancho potencial de la barra de desplazamiento (| * | región).

Lo que tengo ahora es algo como esto:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

He intentado márgenes, relleno, incluso% de ancho para el div más interno y todo lo de ''hacer el cambio''. También necesito esto para trabajar en FF3, IE7 / 8 y (¿fantasía?) IE6.

Answer 1

¿Por qué no mostrar siempre las barras de desplazamiento, incluso cuando no hay necesidad de desplazarse?

Puede lograr esto configurando overflow:scroll; al contenedor.

Answer 2

Agregue otro envoltorio dentro del elemento que tendrá el desbordamiento: estilo automático y ajústelo a aproximadamente 18px más estrecho. La barra de desplazamiento debe aparecer en ese espacio de 18px.

Answer 3

El problema es que una vez que se desplaza sobre el contenedor y aparece la barra de desplazamiento, el ancho del contenido se reduce. Por lo tanto, incluso si utiliza un contenedor anidado cuyo ancho es igual al contenedor menos su barra de desplazamiento, el ancho del contenedor anidado también se reducirá.

Una solución es aumentar el tamaño de los contenidos por el ancho de la barra de desplazamiento al pasar el cursor. Aquí hay una solución que no necesita usar ningún contenedor externo anidado ( categoryCont es el contenedor de desplazamiento y cada menuBlock es uno de los elementos a desplazar):

<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
    <div class="menuBlock" style="width:200px">a</div>
    <div class="menuBlock" style="width:200px">b</div>
    <div class="menuBlock" style="width:200px">c</div>
    ...
</div>

<style type="text/css">
    #categoryCont:hover{
        overflow-y: auto;
    }
    #categoryCont:hover .menuBlock{
    /* Increase size of menu block when scrollbar appears */
        width: 218px;    /* Adjust for width of scroll bar. */
    }
</style>

Un problema con lo anterior es que el ancho de la barra de desplazamiento difiere ligeramente en diferentes navegadores. Uno de los siguientes debería ayudar:

• Utilizando px

Convierta el contenido en un valor absoluto con sangría izquierda como valor absoluto

<div class="menuBlock" style="width:200px">
    a
</div>

cambios a

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>

• Mediante el uso %

Necesitas tanto CSS como jQuery (el primer paso es igual)

<div class="menuBlock" style="width:200px">
    a
</div>

cambios a

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use ''left'' */
    }
</style>

<script>
    // Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>

Answer 4

Tuve un problema similar al que usé para la siguiente solución, no estoy seguro de si esto puede ser una solución a lo que quiere hacer, pero podría serlo.

Tuve un div que se redimensionó al contenido automáticamente, y luego se agregó el rollo, encogiendo el interior, de modo que la tabla contenía el texto, en lugar de hacer el contenedor mucho más ancho. El efecto no deseado se ve en el ejemplo anterior anterior, si el área de texto cambia de tamaño hacia abajo y aparece el desplazamiento.

Mi solución fea fue agregar un div dentro del overflow-y: auto-div, que tenía pantalla: inline-block, y luego agregar otro pequeño div de bloque en línea después de eso, que tenía 19 píxeles de ancho (reservado para la barra de desplazamiento) y un píxel de altura. Ese pequeño div aparecerá junto al div real cuando el navegador redimensionó el div al contenido, y cuando aparece la barra de desplazamiento, el pequeño div se empuja hacia abajo debajo del div real, y el div real se mantiene con. Causará un "margen" inferior de un píxel, pero espero que no sea un problema. Cuando no aparece una barra de desplazamiento, hay 19 píxeles de espacio no utilizado junto a la división real, como se describe en la pregunta.

(El div más externo está justo allí para replicar mi configuración / problema).

Antiguo:

<div style="display:inline-block">
  <div style="max-height:120px; overflow-y:auto; border:1px solid gray">
    <table border=1><tr>
       <td>I do not</td><td>want this to</td>
       <td>add breaks in the text.</td>
    </tr></table>
    <textarea rows=3 cols=15>Resize me down</textarea>
  </div>
</div>
<br>

Nuevo:

<div style="display:inline-block">
  <div style="max-height:150px;overflow-y:auto; border:1px solid gray">
    <div style="display:inline-block">
      <table border=1><tr>
          <td>I do not</td><td>want this to</td>
          <td>add breaks in the text.</td>
      </tr></table>
      <textarea rows=3 cols=15>Resize me down</textarea>
    </div>
    <div style="display:inline-block; width:19px; height:1px"></div>
  </div>
</div>
<br>

Answer 5

Use overflow: scroll lugar de overflow: auto : forzará la aparición de una barra de desplazamiento.