O hero corresponde à abertura de um site, ou seja, aquilo que fica imediatamente visível quando se abre a página principal.

Para conseguir que o hero ocupe 100% da altura da janela do browser precisamos que os elementos pais, ou seja, os elemento HTML que precedem a section#hero tenham também altura 100%. No CSS começamos por indicar:

/* primeiro "pai" do section#hero, na hierarquia do HTML */
html { height: 100%; }

/* segundo "pai" do section#hero, na hierarquia do HTML */
body { height: 100%; }

/* e finalmente o nosso elemento */
section#hero { min-height: 100%; }

No elemento a que queremos dar 100% de altura, section#hero usamos min-height, desta forma garantimos que se o conteúdo desse elemento exceder a altura do ecrã, não vai ficar cortado ou desformatado porque apenas definimos a sua altura mínima.

A seta incluída no final do hero serve para dar a indicação de que existe mais conteúdo na página. Outra alternativa, com o mesmo objetivo, é usar uma altura de 80%, para mostrar logo um pedaço do conteúdo seguinte. Se não tivermos esta preocupação o utilizador pode não reparar que a página tem scroll e pensar que não existe mais conteúdo para além do que está visível.

Atenção: neste exemplo não está incluída navegação no hero mas faz todo o sentido que esteja enquadrada no início da página. A navegação é uma parte essencial de qualquer site/página, ajuda o utilizador a para compreender a estrutura do site e dá acesso imediato aos vários conteúdos.

Imagem de fundo: Eadweard Muybridge's Phenakistoscope: Athletes – Boxing