html - link - Diseño fluido de CSS y bordes

style html

Question

Al diseñar un diseño fluido, ¿cómo se usan los bordes sin arruinar el diseño?

Más específicamente, tengo un widget HTML que consta de cinco divs. Me gustaría que los cinco div ocupen todo el espacio del elemento contenedor. También me gustaría tener un borde de 1px alrededor de cada uno.

Intenté: .box {float: left; altura: 100%; ancho: 100%; borde: 1px rojo sólido; } Esto no funciona: habrá un ancho adicional de 10 px para que las cajas se envuelvan. La reducción del porcentaje de ancho no funciona, ya que no ocupará la cantidad correcta de espacio y, para ciertos tamaños de página, se ajustará.

¿Cuál es la forma correcta de gestionar la interacción entre estos elementos?

Answer 1

Esto te acercará bastante, pero no al 100% (juego de palabras). Para dar un elemento al 100% de altura, necesita saber "100% de qué?". Todos los elementos principales también deben tener una altura del 100% y esto incluye el cuerpo. O como lo expresó el W3C: "Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se calcula en ''automático''". Como puede ver, también necesitamos darle al cuerpo "posición: absoluta"; para que la altura sea honrada Este ejemplo también divide el ancho en cinco columnas iguales con bordes (y algo de relleno y margen solo por diversión):

<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute; 
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
    div.column {
    height: 100%;
    border: 1px solid blue;
    margin: 1em;
    padding: 2em;
    }
</style>

<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>

Como puede ver cuando lo prueba, no tenemos ningún problema con el witdh. Esto se debe a que las "secciones" que dividen el ancho no tienen relleno, margen ni bordes. Por lo tanto, el ancho que establecemos será el ancho que ocupen en la pantalla. Ahora, esto no es estrictamente cierto en la práctica. De hecho, he establecido el ancho 19.95% y no el esperado 20%. El problema es que algunos navegadores (IE para uno) tienen un error de redondeo al sumar porcentajes y cuantas más subdivisiones sumar, mayor es el error.

Donde este método obviamente falla es cuando se trata de la altura. A diferencia de "width: auto;", que hará que el div ocupe el espacio horizontal disponible, "height: auto;"; solo hará que el div sea tan alto como su contenido. Debes especificar "altura: 100%;" para obtener el div para llenar el alto de la ventana, pero lamentablemente, al agregar margen, relleno y bordes, la altura representada del div se vuelve mayor que la ventana gráfica, lo que da como resultado una barra de desplazamiento vertical.

Aquí realmente solo puedo ver dos opciones; Ya sea 1) acepte que los divs no llenan por completo la altura de la ventana y establezca su altura en un 80% o 2) Saltee el borde inferior y configure el cuerpo como "desbordamiento: oculto", que recortará las partes del divs que sobresalen más allá del borde de la ventana.

Finalmente, por supuesto, también puede utilizar algunos scripts simples para lograr lo que busca. No debería ser muy complicado en absoluto, pero esa es una pregunta con otra etiqueta ... ¡Feliz codificación!

Answer 2

Solo coloque el width: 100% en el div más externo y no ponga un borde en él. Si haces esto, los recuadros internos llenarán el espacio (suponiendo que no los has flotado ni nada) ya que son elementos de bloque, y no tendrás que preocuparte por las fronteras que se sumen al tamaño total.

Si realmente necesita la apariencia de cinco bordes anidados sólidos de un solo píxel, puede hacer algo como esto (con nombres semánticos apropiados, afortunadamente):

<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>

Como puede ver, puede falsificar el segundo borde utilizando relleno y colores de fondo en el segundo div (incluso podría reducir el número total de divs al hacer esto, solo recuerde que no puede rellenar el div más externo sin atornillar su ancho )

Answer 3

Vea este artículo .

Básicamente, en el modelo de caja de CSS "tradicional", el ancho de un elemento de cuadro solo especifica el ancho del contenido del cuadro, excluyendo su borde (y relleno).

En CSS3, puede cambiar a un modelo de caja diferente de la siguiente manera:

box-sizing: border-box;

Las implementaciones específicas del navegador de esto son:

-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8

Esto hará que los tamaños de caja incluyan el borde y el relleno del elemento. Entonces ahora puedes especificar

.box { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   width:20%;
   border:1px solid red;
   float:left
}

y tener los cinco divs ocupan todo el ancho del elemento contenedor sin envolverse.

Tenga en cuenta que esto no es compatible con navegadores antiguos. Para estos, deberá ajustar cada cuadro en un segundo cuadro, como en otras respuestas en esta página.

Answer 4

Oh chico, casi odio mencionar esto, pero hay una manera muy fácil de hacer esto en una barra horizontal. No es "pixel perfecto", excepto en su ancho mínimo, pero no es perceptible a simple vista.

Divida el contenedor div por la cantidad de elementos. Digamos que tiene seis elementos de navegación con un borde blanco (esto es especialmente bueno para los números que no se dividen en 100 porque de todos modos no será perfecto).

Establezca su ancho total para cada div secundario izquierdo flotante a la fracción correcta (usando% para margen izquierdo o derecho o relleno) para que sean igual a @ 100%. Continúe y coloque un borde de 1px a la derecha en los divs secundarios. Para el último div en el extremo derecho, haga una segunda clase sin borde o simplemente use style = ''border: none''.

Luego, en su ancho mínimo, baje lentamente el ancho de cada división para niños hasta que quepan.

Aquí hay un poco de código de una página anterior que usa este método para una página líquida con un ancho mínimo de 960 px (958 px y un borde de 1px en cada lado):

.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}

Creo que en realidad es lo más cercano al píxel perfecto que se puede obtener con el ancho mínimo, y en anchos más altos, aunque el divisor derecho es tal vez 4 px más ancho que los otros, no se puede ver al mirarlo. (Obviamente, esto no funcionaría si necesita un borde derecho en la div derecha, ya que verá algunos píxeles de fondo).