1

Estou montando um layout responsivo...

Meu "menucontainer" é fixo...

Então a largura dele não acompanha o tamanho da interface do site...

Por esse motivo quando o zoom aumenta ele vai ficando e não pega fluidez.

Então, se eu conseguisse fazer com que a cada window.resize o tamanho do "menucontainer" se igualasse ao da interface do layout, eu forçaria uma fluidez.

Então eu fiz assim (não funciona):

function resizee(){
        var box = document.querySelector('.boxinterface');
        var hcont = document.querySelector('.headercontainer');
        box.style.maxWidth = "1100px";
        setInterval(function(){
            hcont.style.width = box.style.width;
        },3000);
    }
window.addEventListener('resize',resizee,false);
resize();

Até consegui resolver esse problema com media queries, mas achei não ideal porque tem que definir varios breakpoints... ainda mais porque isso é uma mera questão de fluidez.

jsFiddle com o problema: http://jsfiddle.net/9p55xp6w/2/

13
  • 1
    Não é melhor trabalhar com % já que o site é responsivo? Commented 15/12/2014 às 9:06
  • 2
    @renan haha, pensamos o mesmo ao mesmo tempo :)
    – Sergio
    Commented 15/12/2014 às 9:06
  • 1
    @Sergio Olho de coruja, fomos direto no px :P Commented 15/12/2014 às 9:07
  • 1
    pq não usa o bootstrap? (getbootstrap.com) Commented 15/12/2014 às 11:14
  • 1
    @ropbla9 isso pode ser feito só com CSS, usando o width: inherit; e defenindo uma width para a div pai (exemplo 80%), assim: jsfiddle.net/sq5zwd32 - votei para reabrir e vou dar isso como resposta se achar que pode resolver o seu problema.
    – Sergio
    Commented 15/12/2014 às 17:47

2 Respostas 2

2

Não tenho certeza se entendi corretamente o problema, mas você acredito que isso resolva o seu problema:

.boxinterface{
    max-width: 500px;
    margin:0 auto;
    height: 600px;
    box-shadow: 0px 1px 1px 1px rgba(51, 50, 50, 0.2);
    border: 1px solid black;
}
.headercontainer{
    position:fixed;
    margin-top:-3px;
    width: 81.2%;
    max-width: 410px;
    background-color:#f5f5f5;
    z-index:1;
    border: 1px solid black;
}

http://jsfiddle.net/9p55xp6w/4/

2

Da forma que você está fazendo não funcionará mesmo pois a propriedade fixed tem o seu posicionamento calculado em relação a tela. Querer que a div filha se mostre fixa (visualmente) no topo da div pai não quer dizer que isto deve ser feito com position:fixed. Nessa resposta há uma explicação sobre essas propriedades e seu comportamento de cada uma.

Ao invés de fixed, utilize a posição absolute na sua div filha. Já na div pai, use posição relative. Isso fará com que o posicionamento da filha seja calculada em relação ao pai e não à tela.

.box-interface {
    position: relative;
    max-width: 500px;
    margin:0 auto;
    height: 600px;
    background: #ecf0f1
}

.box-interface > header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: #9b59b6
}
<div class='box-interface'>
    <header>aa</header>
</div>

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 .