3

Estoy construyendo un sitio en Internet y tengo una duda sobre el ancho del elemento main.

El código es el que sigue:

body {
  align-items: center;
  display: flex;
  flex-direction: column
}

nav {
  background-color: #ff3b30
}

main {
  background-color: #04de71;
  width: 75%
}

footer {
  background-color: #787aff
}
<body>
  <nav>undefined</nav>
  <main>undefined</main>
  <footer>undefined</footer>
</body>

Tenemos claro que quiero que main ocupe el 75% de la página. El problema reside en que a medida que el viewport tiende a 0, el contenido se va haciendo más slim, y tiene sentido, puesto que main está ocupando el 75% del viewport de, por ejemplo, un móvil.

El comportamiento que espero y quiero es que haya espacios a ambos lados de main ocupando (100% - 75%) / 2 y que al disminuir el viewport horizontal y llegue un punto en que el width del viewport = width de main, este vaya "de la mano" con el viewport.

Todo esto tengo que realizarlo con %, abstenerse px o medidas relacionadas, así como consultas @media.

Dejo un ejemplo claro de un sitio web que sigue el comportamiento que quiero conseguir pero en px. Mi caso debe ser con %. El elemento a investigar es <div id="main"></div>

5
  • 5
    La página a la que haces mención, es la misma que explica cómo funciona, está utilizando la unidad ch: meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit Commented el 17 jun. 2019 a las 19:43
  • 1
    Puede ser una opción, pero estoy intentando realizarlo con %, ¿habrá alguna manera de realizarlo?
    – user128841
    Commented el 17 jun. 2019 a las 19:53
  • 3
    El ejemplo que pones no veo que tenga nada que ver con lo que pides, en esa web el main tiene un ancho máximo, crece con el viewport hasta que llega a ese ancho y entonces deja de crecer. Si quieres comportamientos distintos a distintas resoluciones entonces deberías usar mediaqueries, es para lo que son, no entiendo porque no quieres usarlas
    – user7176
    Commented el 18 jun. 2019 a las 6:35
  • 2
    Como te dije anteriormente, la página usa la unidad ch y aunque main no usa consultas @media, la etiqueta body sí que las utiliza en su fuente al darle valores en em, esto por consiguiente va a afectar el comportamiento de main dependiendo del valor que se de al width en ch. Commented el 8 jul. 2019 a las 14:40
  • La cosa es que esa consulta @media se aplica mucho después de que el viewport tenga el mismo width que main. GIF
    – user128841
    Commented el 8 jul. 2019 a las 18:28

3 respuestas 3

2

¿Has probado a hacer uso del display flex?

Aquí he te he creado un snippet donde haciendo uso de las propiedades de flex align-items y justify-content he conseguido centrar todo el contenido de un elemento (en este caso del body) y luego ya con aplicarle el width que desees al hijo te pondrá automáticamente márgenes iguales a los lados

html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main {
  background-color: red;
  width: 75%;
  height: 80%;
}

nav,
footer {
  width: 100%;
  height: 10%;
  background-color: green;
}
<body>
  <nav>
  </nav>
  <main>
  </main>
  <footer>
  </footer>
</body>

2
  • Lo he probado, pero lo que necesito es que cuando el viewport disminuya, llegue un punto en que main y este viewport tengan el mismo width, y a partir de ahí que ambos vayan disminuyendo con el mismo width.
    – user128841
    Commented el 8 jul. 2019 a las 8:52
  • 1
    ¿Como tienes configurado el viewport, porque no se si termino de pillarte? Igual a mayores de mi respuesta puedes jugar con el max-width y el min-width del main
    – Vil_Llar
    Commented el 8 jul. 2019 a las 9:16
1
+50

Como ya te dijeron en los comentarios, no es posible hacerlo en porcentaje, ya que está usando ch. En definitiva, el texto del sitio es un %70 (aproximado), luego queda fijado y deja de ser un porcentaje.

Lo que se puede hacer es usar JavaScript para transformar el porcentaje inicial en pixeles, y agregar un estilo a partir de eso.

Se intenta generar mediante JavaScript algo como lo siguiente:

main {
    background-color: #04de71;
    margin: 0 auto;
    width: 500px;
}

Esto, suponiendo que 500px es el %75 del ancho de la ventana. Para obtener el ancho, se usa window.innerWidth.

La función se inicializa en el onload del body, pasando como parámetro el 75, que es el porcentaje:

<body onload = "agregar_estilo_ancho(75)" >

Código final:

function agregar_estilo_ancho(porcentaje){
  var ancho = Math.floor(window.innerWidth*porcentaje/100)
  var contenido = "main {background-color: #04de71; margin: 0 auto; " +
    "width: " + ancho + "px;}"
  ;
  var estilo = document.createElement("style")
  estilo.innerHTML = contenido
  document.head.appendChild(estilo)
  console.log("Tamaño fijado: " + ancho + " pixeles")
}
body {
  background-color: #012f;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
<body onload = "agregar_estilo_ancho(75)" >
  <main>Texto</main>
</body>

1
  • 2
    Exactamente lo que necesitaba.
    – user128841
    Commented el 9 jul. 2019 a las 13:42
0

Lo que necesitas son media queries para variar los valores que le das a cada clase dependiendo el tamaño de la pantalla (puedes ver un poco más en esta respuesta).

body {
  align-items: center;
  display: flex;
  flex-direction: column
}
nav {
  background-color: #ff3b30
}
main {
  background-color: #04de71;
  width: 75%
}
footer {
  background-color: #787aff
}
@media (min-width: 480px) and (max-width: 767px) {
   main {
     width: 80%
   }
}
@media (min-width: 0px) and (max-width: 479px) {
   main {
     width: 100%
   }
}
<body>
  <nav>undefined</nav>
  <main>undefined</main>
  <footer>undefined</footer>
</body>

1
  • 3
    No, porque el screen de un iPhone X, por ejemplo, es de 2.436 por 1.125 píxeles. Hacerlo con consultas media añade código innecesario. La página que he indicado en cuestión no utiliza consultas media para realizar lo que quiero, por lo que existe un método mejor de realizar eso.
    – user128841
    Commented el 17 jun. 2019 a las 19:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.