Cómo establecer un valor de porcentaje de altura en HTML/CSS

Question 1

Estoy tratando de establecer un <div> a un cierto porcentaje de altura en CSS, pero sigue siendo del mismo tamaño que el contenido dentro de él. cuando me quite <!DOCTYTPE html> sin embargo, funciona, el <div> ocupando toda la página como se desee. Quiero que la página se valide, entonces, ¿qué debo hacer?

Tengo este CSS en el <div>que tiene una identificación de page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

Question 2

Estoy tratando de establecer un div en un cierto porcentaje de altura en CSS

¿Porcentaje de qué?

Para establecer un porcentaje de altura, su elemento principal autodebe tener una altura explícita. Esto es bastante evidente, ya que si dejas la altura como

el bloque tomará la altura de su contenido… pero si el contenido en sí tiene una altura expresada en términos de porcentaje del padre, se ha convertido en un pequeño Catch 22. El navegador se da por vencido y solo usa la altura del contenido. height Así que el padre del div debe tener un explícito

propiedad. Si bien esa altura también puede ser un porcentaje si lo desea, eso solo lleva el problema al siguiente nivel. <html> Si desea que la altura del div sea un porcentaje de la altura de la ventana gráfica, todos los ancestros del div, incluido <body>y height: 100%Tienes que tener

por lo que hay una cadena de alturas porcentuales explícitas hasta el div.

(*: o, si el div está posicionado, el ‘bloque contenedor’, que es el ancestro más cercano que también debe colocarse).vhAlternativamente, todos los navegadores modernos e IE>=9 admiten nuevas unidades CSS relativas a la altura de la ventana gráfica (vw) y el ancho de la ventana gráfica (

div {
    height:100vh; 
}

):

Question 3

brian campbell <html> Debe establecer la altura en el <body> y elementos también; de lo contrario, solo serán lo suficientemente grandes para caber en el contenido.Por ejemplo

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Question 4

olex ponomarenko

La respuesta de bobince le permitirá saber en qué casos “altura: XX%;” funcionará o no funcionará. aspect-ratio Si desea crear un elemento con una relación establecida (altura: % de su propio ancho), use el propiedad. Asegúrese de que la altura no esté configurada explícitamente en el elemento para que funcione.

.square {
  width: 100%;
  height: unset;
  aspect-ratio: 1 / 1;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio padding-bottomHistóricamente, la mejor manera de hacer esto era establecer la altura usando

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

. Ejemplo de cuadrado: El contenedor cuadrado solo estará hecho de relleno y el contenido se expandirá para llenar el contenedor. Largo artículo de 2009 sobre este tema:

Question 5

Dr. A. Barik body{height: 100%} Para usar porcentaje (%), debe definir el % de su elemento principal. Si utiliza no funcionará porque su padre no tiene porcentaje de altura. En ese caso para trabajar eso peso corporal html{height:100%}

debes agregar esto en

body{height:100vh}

En otros casos, para deshacerse de ese porcentaje principal definitorio, puede usar vh representa

Question 6

altura de la ventana gráfica 100vw / 100vhPuedes usar

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

Question 7

Jahmic

A veces, es posible que desee establecer condicionalmente la altura de un div, como cuando todo el contenido es menor que la altura de la pantalla. Establecer todos los elementos principales al 100% cortará el contenido cuando sea más largo que el tamaño de la pantalla.

Entonces, la forma de evitar esto es establecer la altura mínima:

Continúe permitiendo que los elementos principales ajusten automáticamente su altura. Luego, en su div principal, reste los tamaños de píxel del div de encabezado y pie de página de 100vh (unidades de ventana gráfica). En css, algo como:

altura mínima: calc(100vh – 246px);

Question 8

el Hutt block-size Con las nuevas propiedades de tamaño de CSS, puede salirse con la suya sin establecer la altura exacta en el padre. El nuevo inline-size y

<!DOCTYPE html>
<style>
  #parent {
    border: 1px dotted gray;
    height: auto;   /* auto values */
    width: auto;
  }

  #wrapper {
    background-color: violet;
    writing-mode: vertical-lr;
    block-size: 30%;
    inline-size: 70%;
  }

  #child {
    background-color: wheat;
    writing-mode: horizontal-tb;
    width: 30%;  /* set to 100% if you don't want to expose wrapper */
    height: 70%; /* none of the parent has exact height set */
  }
</style>

<body>
  <div id=parent>
    <div id=wrapper>
      <div id=child>Lorem ipsum dollar...</div>

Las propiedades se pueden usar así:

Cambiar el tamaño de la ventana del navegador en el modo de página completa. Creo que los valores son relativos a la altura y el ancho de la ventana gráfica. Para obtener más información, consulte:

https://www.w3.org/TR/css-sizing-3/ Casi todos los navegadores lo admiten:

¿Ha sido útil esta solución?