1

Estou iniciando um projeto agora e quero deixar o header responsivo, mas não consigo. O header tem um efeito em js que muda as imagens a cada refresh, mas não consigo atribuir o height correto pra ficar responsivo, só funciona em px, e em px não fica responsivo (Não quero media querie, por favor), qualquer outro dado que coloco não dá certo, segue:

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="pt-br">
    <meta charset="UTF-8">
    <title>MMCCPCS</title>


    <!-- Estilização -->
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <!--Animate CSS-->
    <link rel="stylesheet" type="text/css" href="css/animate.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">


<body>
    <header>

    </header>
    <section id="empresa">

    </section>

<script type="text/javascript">
   function randFundo(){
   var fundo = [1,2,3,4,5][Math.floor(Math.random()*4)];
   !localStorage.fundo ? localStorage.fundo = fundo : 0;
   return localStorage.fundo == fundo
   ?
   (localStorage.fundo = fundo+1)
   :
   (localStorage.fundo = fundo);
}

var e_header = document.querySelector("header");
e_header.style.backgroundImage = "url(imagens/fundo"+randFundo()+".jpg)";


</script>

</body>
</html>

CSS

html{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
header {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 650px; /* Aqui está o erro, se coloco em % não dá certo e em px não fica responsivo */
    background-color: #D9D625FF;
    background-repeat: no-repeat;
}
#empresa {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #1981CD;
    margin: 0;
    padding: 0;
}

Não dá pra ver as imagens pq estao em meu localhost, mas dá pra ter a noção do que eu quero) Link CodePen: https://codepen.io/clayton2018/pen/WMbzNd

2
  • Pelo que entendi cada imagem que vc vai chamar no Header tem uma altura diferente, mas vc quer que todas apareçam com a mesma altura é isso?
    – hugocsl
    Commented 30/01/2018 às 18:34
  • Não, todas as imagens tem 1350 x 600, eu só quero que o header seja responsivo, a cada largura do navegador ela se ajusta com a imagem. Se eu colocar em pixel nos navegadores menores que 1350 aparece o fundo amarelo, pq o height está com 610px, precisava ser em porcentagem, mas se coloco dá erro e não aparece o header. Commented 30/01/2018 às 18:42

1 Resposta 1

1

Eu fiz umas pequenas mudanças no CSS do html,body e no <header> e aqui o BG ficou responsivo com altura em % tudo direitinho. Da uma olhada para ver se funciona ai.

Se vc não determinar uma altura em % para o <html> e o <body> vc não vai conseguir usar altura em % nos filhos deles. (a não ser que vc remova o <!DOCTYPE html> não recomendo isso!)

Enão onde vc declarava a altura como auto height:auto; vc tem que por height:100%; Dessa forma:

html{
    width: 100%;
    height: 100%;  /* altura em % no "pai" não use auto */
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;  /* altura em % no "pai" não use auto */
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

Testei no Chrome, FireFox e IE e não deu problema. Veja no Snippet abaixo

html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}


header {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50%; 
    background-color: #D9D625FF;
    background-repeat: no-repeat;
    background-image: url(http://placecage.com/1350/650);
    background-position: top center;
    background-size: cover;
    overflow: hidden;
}

#empresa {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #1981CD;
    margin: 0;
    padding: 0;
}
    <header>

    </header>
    <section id="empresa">

    </section>

inserir a descrição da imagem aqui

Leia sobre o "Bug" https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this

4
  • Obrigado, deu certo e ao msm tempo tbm não deu. Ficou responsivo, mas preciso determinar a altura exata pra terminar o header, no caso a altura das imagens, que é de 600px, senão a section empresa não fica no lugar correto que seria logo abaixo ao header. Veja prnt.sc/i8qcd1 e prntscr.com/i8qeao Commented 1/02/2018 às 16:15
  • Se eu coloco height: auto ou 600px deixa de ficar responsivo, e se colocar em % não fica bom. Commented 1/02/2018 às 16:22
  • 1
    Acho que infelizmente sem @media vc não vai conseguir tratar isso. Vc pode tentar colocando isso na altura do Header, mas não sei se vai ficar do jeito que vc quer... min-height: 600px; height: 50%; Assim a altura mínima fica de 600px, mas quando a tela for maior o Header fica maior também, mas nunca menor que 600px de altura.
    – hugocsl
    Commented 1/02/2018 às 17:37
  • É com o min-height pode dar certo, vou fazer uns testes aqui e coloco o que deu, vlw pela ajuda Commented 1/02/2018 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .