Make daughter div have same fixed parent size

Question

Make daughter div have same fixed parent size

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I'm putting together a responsive layout ...

My "menucontainer" is fixed ...

So its width does not match the size of the site's interface ...

Because of this, when the zoom increases, it becomes more fluid.

So if I could make every window.resize the size of the menucontainer equal to that of the layout interface, I would force a flow.

So I did so (does not work):

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();

I even managed to solve this problem with media queries , but I found it not ideal because you have to define several breakpoints ... even more because this is a mere matter of fluency.

jsFiddle with the problem: link

javascript css layout-responsivo

asked by anonymous 15.12.2014 / 08:01

2 answers

Avoiding two processes of the same application in Pascal How to verify without inside a #id has a .class?

score 2 · Answer 1

I'm not sure I understand the problem correctly, but you think this will solve your problem:

.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;
}

link

score 2 · Answer 2

The way you are doing will not work even though the fixed property has its calculated positioning relative to the screen. Wanting the div daughter to be fixed (visually) at the top of% parent% does not mean that this should be done with div . In this answer there is an explanation of these properties and their behavior of each one.

Instead of position:fixed , use the fixed position in your absolute child. Already in div parent, use div position. This will cause the child's positioning to be calculated relative to the parent, not the screen.

.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>