Unha pregunta común no deseño do sitio web é "como se configura o alto dun elemento ao 100%"?
Isto pode parecer unha resposta fácil. Simplemente usa CSS para definir a altura dun elemento nun 100%, pero isto non sempre estira ese elemento para que se axuste á ventá do navegador. Descubramos por que isto ocorre e que pode facer para conseguir este estilo visual.
Píxeles e porcentaxes
Cando define a altura dun elemento usando a propiedade CSS e un valor que usa píxeles, ese elemento ocupará tanto espazo vertical no navegador.
Por exemplo, un parágrafo cunha altura: 100px; levará 100 píxeles de espazo vertical no seu deseño. Non importa o tamaño da xanela do navegador, este elemento será de 100 píxeles de alto.
Os porcentaxes funcionan de forma diferente aos píxeles. De acordo coa especificación W3C, as alturas porcentuais calcúlanse con respecto ao alto do recipiente. Entón, se pór un parágrafo cunha altura: 50%; dentro dun div cunha altura de 100px, o parágrafo terá 50 píxeles de alto, o que supón o 50% do seu elemento primario.
Por que as alturas porcentuais fallan
Se está a deseñar unha páxina web e ten unha columna que desexa ocupar o máximo da xanela, a inclinación natural é engadir unha altura: 100%; a ese elemento. Despois de todo, se define o ancho ao ancho: 100%; o elemento ocupará o espazo horizontal completo da páxina, polo que a altura debería funcionar igual, non? Desafortunadamente, este non é o caso.
Para entender por que isto ocorre, debes entender como os navegadores interpretan a altura e a anchura. Os navegadores web calcularán o ancho dispoñible total en función da amplitude da xanela do navegador. Se non configura ningún valor ancho nos seus documentos, o navegador automaticará os contidos para cubrir o ancho total da fiestra (o ancho do 100% é o predeterminado).
O valor da altura calcúlase de xeito diferente ao ancho. De feito, os navegadores non evalúan a altura en absoluto a non ser que o contido sexa tan longo que vai fóra da pantalla (polo tanto, requiren barras de desprazamento) ou se o diseñador web establece unha altura absoluta para un elemento na páxina. Se non, o navegador simplemente deixa o fluxo de contido dentro do ancho da pantalla ata que finalice. A altura non se calcula en absoluto.
Os problemas ocorren cando se establece unha altura de porcentaxe nun elemento que ten elementos pai sen alturas configuradas; noutras palabras, os elementos primarios teñen un alto predeterminado: auto; . Está, en efecto, pedindo ao navegador calcular unha altura dun valor indefinido. Xa que iso equivaldría a un valor nulo, o resultado é que o navegador non fai nada.
Se desexa establecer unha altura nas súas páxinas web a unha porcentaxe, ten que definir a altura de cada elemento primario do que desexa definir a altura. Noutras palabras, se ten unha páxina como esta:
Contido aquí
Probablemente o div eo parágrafo nel teñan un 100% de altura, pero ese div ten realmente dous elementos primarios:
e. Para definir a altura do div a unha altura relativa, tamén debe establecer a altura do corpo e os elementos html.
Por iso, tería que usar CSS para definir a altura de non só o div, senón tamén os elementos corpo e html. Isto pode ser un desafío, xa que pode acelerar rapidamente todo o que se estableza ao 100% de altura, só para conseguir este efecto desexado.
Algunhas cousas que debes observar cando traballas con 100% de alturas
Agora que sabe como configurar o alto dos elementos da páxina ata o 100%, pode ser emocionante saír e facelo a todas as súas páxinas, pero hai que coñecer algunhas cousas:
- Os marxes e o recheo poden engadir unha barra de desprazamento onde non o desexes. Unha das cousas máis irritantes que atopei ao traballar con alturas porcentuais (e ancho) é que entón o recheo e as marxes sobre eses mesmos elementos poden engadir barras de desprazamento á páxina, aínda que todo o contido móstrase sen necesidade de barras de desprazamento. Isto ocorre porque a altura ou o ancho do elemento é o primeiro que se calcula. A continuación engádense as marxes e os remos. Entón, se ten un elemento cunha altura de 100% e as marxes superior e inferior de 10 píxeles cada, haberá unha barra de desprazamento para os 20 píxeles adicionais. Lembre que o modelo de caixa CSS engade marxe, bordo e acolchado ao tamaño dun elemento, polo que o 100% con calqueira outros valores de modelo de caixa será en realidade superior ao 100%.
- Se o teu contido ocupa máis do que a altura definida, sobrescribirá calquera cousa despois. Dito doutro xeito, se ten un deseño cunha columna de 80% de alto e que o contido dentro delas ocupará o 100% da altura, ese 20% adicional seguirá por debaixo da columna e romperá o deseño visual da túa páxina. Se hai contido baixo esa columna, o texto simplemente escriba sobre a parte superior. Moitas veces vexo que isto ocorre cando un diseñador web intenta forzar a altura dunha páxina e conséguelo funcionando perfectamente para o seu lanzamento, pero cando o contido na páxina cambia no futuro, as alturas absolutas romperán totalmente o fluxo da páxina. Isto é dobremente certo cando está a construír sitios web responsivos cuxo ancho e alto debe cambiar co tamaño da vista.
Para solucionalo, tamén pode configurar a altura do elemento. Se o axusta a auto, as barras de desprazamento aparecerán se son necesarias pero desaparecen cando non. Isto soluciona a ruptura visual, pero engade barras de desprazamento onde non o desexes.
Usando Unidades de Vista
Outra forma de afrontar este desafío é experimentar con unidades de visión CSS. Ao empregar a unidade de medida da altura da xanela, pode dimensionar elementos para ocupar unha altura definida da xanela e iso cambiará a medida que a xanela modifique. Esta é unha boa forma de obter os teus visuais de 100% de alto nunha páxina pero aínda os faga flexibles para diferentes dispositivos e tamaños de pantalla.