Make div daughter have same size as fixed parent

Asked

Viewed 1,216 times

1

I’m putting together a responsive layout...

My "menucontainer" is fixed...

So the width of it does not match the size of the site interface...

For this reason when the zoom increases it becomes and does not take fluidity.

So, if I could make every window.resize the size of the "menucontainer" if it matched that of the layout interface, I would force a fluidity.

So I did so (it doesn’t 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 it has to define several breakpoints... even more because this is a mere matter of fluidity.

jsFiddle with the problem: http://jsfiddle.net/9p55xp6w/2/

javascript css responsive-layout

  • What is the CSS of this menucontainer? is using px, % or em?

  • 1

    It’s not better to work with % since the site is responsive?

  • 2

    @Renan haha, we think the same at the same time :)

  • 1

    @Sergio Owl Eye, we went straight into the px :P

  • 1

    pq does not use bootstrap? (http://getbootstrap.com/)

  • Voce could use the bootstrap has several spills ready.

  • @Sergio he is in px why put yourself in % gets the biggest mess.

  • @Sergio http://jsfiddle.net/9p55xp6w/2/

  • 1

    @ropbla9 this can be done only with CSS, using the width: inherit; and establishing a width for the parent div (example 80%), thus: http://jsfiddle.net/sq5zwd32/ - I voted to reopen and I will respond if you think you can solve your problem.

  • @Sergio is supposed to work, but here n ta working. When put inherit the menucontainer gets the interface size matedo

  • @ropbla9 and has closed the width of the father? not only with max-width? if you do not have to update jsFiddle or post the full page to see where the problem might be.

  • @ropbla9 I got this to work?

  • @Sergio, width alone works, max-width doesn’t. Then I set a min-width breakpoint at the other magnification to leave full canvas at a certain point of reduction. This way the fixed header ta accompanying the interface.

Show 8 more comments

2 answers

2

I’m not sure I understand the problem correctly, but you believe it solves 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;
}

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

2

The way you’re doing it won’t even work because the property fixed has its positioning calculated relative to the screen. Want the div daughter is fixed (visually) at the top of the div Dad doesn’t mean it should be done with position:fixed. In that reply there is an explanation about these properties and their behavior of each.

Instead of fixed, use the position absolute in his div daughter. Already in the div father, use position relative. This will cause the positioning of the daughter to be calculated in relation to the father and 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>

Browser other questions tagged javascript css responsive-layout

You are not signed in. Login or sign up in order to post.