针对响应式布局混合px和％ [英] Issue mixing px and % for responsive layout
问题描述
我正在尝试创建一个带有响应式内容div的固定边栏，它必须是732px宽度加上20px左右的边距。为了达到这个目的，我使用了位置固定的侧栏和导航栏。然后应用margin-left，以便内容div在侧栏之后开始。
我正在努力应对快速响应的部分。我已经在媒体查询部分保留了248px的余量，以便内容div仍然在侧栏之后开始。我很难解决px到％。我将100％应用于内容div，然后强制内容通过边栏的宽度（228px + 20px间隙）超出包装。所以我从侧边栏248px的宽度中删除了100％，这让我留下了很大的空白。我在右侧添加了另一个20像素，以便内容div的左右相等。但是差距仍然存在。
我不确定是否可以同时使用％和px？计算所需空间时，我会错在哪里？提前致谢。
html：
< body>
< div id =wrapper>
< div id =navbar-top>
< / div>
< div id =navbar-side>
< p>边栏（228px宽度加上20px间隔）< / p>
< / div>
< div id =page-wrapper>
< p>内容div< / p>
< / div>
< / div>
< / body>
css：
#wrapper {
width：100％;
背景颜色：＃099;
}
＃navbar-top {
width：100％;
height：50px;
位置：固定;
top：0;
剩下：0;
背景颜色：＃333;
}
＃navbar-side {
width：228px;
最低身高：100％;
背景颜色：＃666;
位置：固定;
top：50px; / *在navbar-top下推送内容* /
left：0;
}
＃page-wrapper {
height：1000px;
width：732px;
背景颜色：#CCC;
margin-top：50px;
margin-left：248px;
}
/ *********************** [媒体查询开始] *** ******************************************** /
@ media screen和（min-width：1000px）{/ * desktop queries [> 1000px] * /
#wrapper {
background-color：＃C9C;
}
＃page-wrapper {
width：73.2％;
}
}
@media屏幕和（最大宽度：1000px）{/ *移动查询[< 1000px] * /
＃page-wrapper {
max-width：732px;
}
}
不需要给内容元素一个明确的宽度。
所有你需要做的就是给它一个顶部和左边距，不被覆盖由你的固定元素。这是块级元素的默认行为，需要所有的水平空间！
通常，使用像'px'这样的绝对单位是一个坏主意，尤其是当它来响应布局。但是为了证明这是可能的，我设置了一个 DEMO 。
宽度：100％;
块级元素不需要这样的元素，比如 div ！
这个demo有20px的实际差距。如果你想让元素相邻（因为background-color / -image），那么简单地将#content的margin-left设置为228px，并使用 padding-left：20px; 。
就是这样...！
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;
}
}
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 ...!
这篇关于针对响应式布局混合px和％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
