Por que height: 100% não funciona para expandir divs para a altura da tela?

295

Quero que o carrossel DIV (s7) se expanda para a altura da tela inteira. Eu não tenho uma idéia de por que não está tendo sucesso. Para ver a página, você pode ir aqui .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Expandir snippet

html css height

— Earl Larson
fonte

2

Aqui está uma simples e clara explicação: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

provavelmente melhor solução para elementos aninhados que não deve esticar a altura inteira da janela stackoverflow.com/questions/7049875/height-100-not-working/...

— B-gangster

409

Para que um valor percentual funcione para altura, a altura dos pais deve ser determinada. A única exceção é o elemento raiz<html> , que pode ser uma altura percentual. .

Então, você deu a todos os seus elementos height, exceto the <html>, então o que você deve fazer é adicionar isto:

html {
    height: 100%;
}

E seu código deve funcionar bem.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Expandir snippet

Exemplo JsFiddle .

— Fantasma de Madara
fonte

23

Ok, então isso pode me fazer parecer incrivelmente estúpido, mas seja o que for : você quer dizer que esse <html>é um elemento real - exatamente como <p>ou <img />? Eu pensei que o único objetivo <html>era definir o início e o fim de um documento HTML. Quero dizer, eu pensei que estava lá, não para o layout, mas apenas para que o navegador saiba qual o tipo de documento que está visualizando. Estou completamente impressionado.

— Jay_t55 17/05

29

@ Joey: HTML é um elemento real. Você pode estilizá-lo com CSS, vincular eventos a ele em JavaScript, adicionar classes e IDs a ele e aparecer no DOM. O navegador assumirá um documento HTML mesmo sem a <html>tag e mesmo sem os elementos <head>ou <body>. As especificações HTML, no entanto, consideram a <html>tag obrigatória. Em resumo, sim, é um elemento completo como todos os outros elementos HTML.

— Ghost de Madara

1

@SecondRikudo: Não, a <html>tag é opcional de acordo com as especificações (por exemplo, HTML4 e HTML5). E sim, o elemento é criado de qualquer maneira.

— Robert Siemer

2

hmmm ... para mim, a única maneira isso funcionou foi para definir tanto htmle bodycomo height: 100%(bem como, naturalmente, o específica diveu quero herdar a altura de 100%)

— james

1

@james Sim, todos os pais devem ter uma altura conhecida.

— Ghost de Madara

147

_{Desde que ninguém mencionou isso ..}

Abordagem moderna:

Como alternativa para definir as alturas do elemento html/ , você também pode usar comprimentos de porcentagem da porta de visualização:body100%

5.1.2 Comprimentos de porcentagem de viewport: as unidades 'vw', 'vh', 'vmin', 'vmax'

Os comprimentos de porcentagem da viewport são relativos ao tamanho do bloco inicial. Quando a altura ou largura do bloco inicial contém alterações, elas são dimensionadas de acordo.

Nesse caso, você pode usar o valor 100vh(que é a altura da janela de exibição) - (exemplo)

body {
    height: 100vh;
}

Definir um min-heighttambém funciona. (exemplo)

body {
    min-height: 100vh;
}

Essas unidades são suportadas na maioria dos navegadores modernos - o suporte pode ser encontrado aqui .

— Josh Crozier
fonte

1

Não vejo nenhum benefício nisso. Ele não cria trabalho extra para o navegador que precisa calcular tudo relacionado à janela de exibição do navegador? O dimensionamento da viewport só parece benéfico quando você deseja dimensionar algo relacionado à altura do navegador.

— Robert Went

12

@RobertWent Existem benefícios. Por exemplo, height: 100%só funciona se o elemento pai tiver uma altura definida. Certamente, existem alguns casos em que o pai de um elemento não tem uma altura definida e as unidades de porcentagem da janela de exibição resolvem isso. Em outras palavras, se você tivesse um elemento profundamente aninhado, poderia simplesmente configurá 100vh-lo, e ele teria uma altura do 100%navegador. Você pode não ver nenhum benefício, mas já estive em vários casos em que eles eram a única solução. Estas unidades podem não ser tão benéfico para elementos de raiz, tais como html/ body, mas, no entanto, esta é uma alternativa

— Josh Crozier

2

Mas estamos falando sobre o elemento body, não um elemento profundamente aninhado. Existe apenas um pai possível, o elemento html. É por isso que mencionei que não vejo nenhum benefício e é possivelmente pior do que apenas definir 100%. O seu comentário não diz nada para me deixar magra caso contrário. Só porque algo é novo não o torna melhor. É, no entanto, uma alternativa.

— Robert Went

4

Um problema com essa abordagem é que os iPhones excluem a barra de endereço e a navegação inferior da altura da visualização, o que significa que body { height: 100vh }haverá uma barra de rolagem no carregamento inicial da página.

— BHOLT

2

Agradável. Tentei a outra abordagem, coloquei o height: 100% !important" to each parent til html` sem sucesso, pude ver no domínio que todos os nós da árvore estavam realmente, 100%mas não consegui definir 100% no elemento desejado, mas com o estilo de viewport era fácil

— Pmiranda # 12/19

25

Você também precisará definir 100% de altura no htmlelemento:

html { height:100%; }

— shanethehat
fonte

20

Como alternativa, se você usar position: absolute, height: 100%funcionará perfeitamente.

— Steve Tauber
fonte

4

Seria uma ótima solução se eu não estivesse usando o flexbox para criar meu layout. : /

— Landon Ligue

2

Não se esqueça de definir width:100%;e os pais position:relative;.

— Kai Noack

8

Você deve tentar com os elementos pai;

html, body, form, main {
    height: 100%;
}

Então isso será suficiente:

#s7 {
   height: 100%;
}

— mrbengi
fonte

5

se você quiser, por exemplo, uma coluna esquerda (altura 100%) e o conteúdo (altura automática), você pode usar absoluto:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

em html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
fonte

2

Isso pode não ser o ideal, mas você sempre pode fazê-lo com javascript. Ou no meu caso, jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— oBo
fonte

5

Nunca é uma boa ideia usar o javascript quando o CSS for suficiente.

— Bosworth99

1

Por que fazer algo assim e complicar mais do que deveria ser? Eu não entendo algumas respostas lol ...

— CapturedTree

1

Na fonte da página, vejo o seguinte:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Se você colocar o valor da altura na tag, ele será usado em vez da altura definida no arquivo css.

— Steven
fonte

Isso é estranho, porque isso é o que eu vejo no código fonte da página: <div class = "titular"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson

Ok, enquanto eu não sei como você obteve o código acima, entrei e mudei <div id = "s7"> para <div id = "s7" style = "height: 100%;"> e funcionou. Talvez esteja escondendo algo de mim? De qualquer forma obrigado :)

— Earl Larson

1

Se você posicionar absolutamente os elementos dentro da div, poderá definir o preenchimento superior e inferior para 50%.

Então, algo como isto:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Keith Brown
fonte

1

Não vejo como isso poderia funcionar, pois os 50% são relativos à largura e não à altura do elemento que o contém, ou estou perdendo alguma coisa aqui?

— DrLightman

0

Aqui está outra solução para pessoas que não querem usar html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Expandir snippet

— TheMisir
fonte