Issue mixing px and % for responsive layout

问题

I'm trying to create a fixed side bar with a responsive content div which has to be 732px width plus 20px margin left and right. To achieve this i've used position-fixed for both the side bar and nav-top bar. Then applied margin-left so that the content div starts after the side bar.

I'm struggling with the responsive part. I've kept the 248px margin-left in the media query section so that the content div still starts after the side-bar. I'm having difficulty working out px to %. I applied 100% to the content div, that then forces the content to go outside the wrapper by the width of the side-bar (228px + 20px gap). So I took away the width of the side-bar 248px from the 100% which has left me with a large gap of the right. I've added another 20px on the right so that there's an equal 20px left and right of the content div. However the gap still remains.

I'm not sure if its ok to use both % and px together? Where am i going wrong when calculating the space needed? Thanks in advance.

the html:

<body>

<div id="wrapper">

    <div id="navbar-top">
    </div>

    <div id="navbar-side">
        <p>side bar (228px width plus 20px gap)</p>
    </div>

    <div id="page-wrapper">
    <p>content div</p>
    </div>

</div>


</body>

the css:

#wrapper {
width:100%;
background-color:#099;
}

#navbar-top {
width:100%;
height:50px;
position:fixed;
top:0;
left:0;
background-color:#333;
}

#navbar-side {
width:228px;
min-height:100%;
background-color:#666;
position:fixed;
top:50px; /*pushes content under navbar-top*/
left:0; 
}

#page-wrapper {
height:1000px;
width:732px;
background-color:#CCC;  
margin-top:50px;
margin-left:248px;
}


/***********************[start of media queries]***********************************************/

@media screen and (min-width:1000px) { /*desktop queries [ >1000px ]*/

    #wrapper {
    background-color:#C9C;
    }

    #page-wrapper {
    width:73.2%;
    }

}


@media screen and (max-width:1000px) { /*mobile queries [ < 1000px ]*/

    #page-wrapper {
    max-width:732px;
    }

}

回答1:

It is not necessary to give the content element an explicit width.

All you need to do is to give it a top and left margin, to not be covered by your fixed elements. It is the default behaviour of block-level elements to take all horizontal space!

Generally it is a bad idea to work with absolute units like 'px', especially when it comes to responsive layouts. And also setting heights often causes "unwanted results".

But to demonstrate that it is possible, I have set up a DEMO.

width: 100%;

This is not needed for block-level elements like div!

The demo has a real gap of 20px. If you want the elements next to each other (because of the background-color/ -image), then simply set the margin-left of #content to 228px and use padding-left: 20px;.

That's it ...!

来源：https://stackoverflow.com/questions/21658968/issue-mixing-px-and-for-responsive-layout

标签

html

css

responsive-design