我正在尝试创建一个带有响应式内容 div 的固定侧边栏，它的宽度必须为 732 像素加上左右边距 20 像素。为了实现这一点，我对侧边栏和导航顶部栏都使用了固定位置。然后应用 margin-left 以便内容 div 在侧栏之后开始。
我正在努力处理响应部分。我在媒体查询部分保留了 248px 的 margin-left，这样内容 div 仍然在侧边栏之后开始。我很难计算 px 到 %。我将 100% 应用到内容 div，然后强制内容以侧边栏的宽度(228px + 20px 间隙)超出包装。所以我从 100% 中去掉了侧边栏 248px 的宽度，这让我在右边留下了很大的差距。我在右侧又添加了 20px，这样内容 div 的左右两侧就有了相等的 20px。然而，差距仍然存在。
我不确定同时使用 % 和 px 是否可以？计算所需空间时我哪里出错了？提前致谢。
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>
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;
}
}
最佳答案
没有必要给内容元素明确的宽度。
所有你需要做的就是给它一个上边距和左边距，不要被你的固定元素覆盖。占据所有水平空间是 block 级元素的默认行为!
通常，使用像“px”这样的绝对单位是个坏主意，尤其是在响应式布局方面。并且设置高度通常会导致“不需要的结果”。
但为了证明这是可能的，我设置了一个 DEMO .
width: 100%;
这对于像 div 这样的 block 级元素是不需要的!
该演示有 20px 的实际差距。如果您希望元素彼此相邻(因为背景颜色/图像)，则只需将#content 的 margin-left 设置为 228px 并使用 padding-left: 20px;。
就是这样......!
关于html - 为响应式布局发布混合 px 和 %，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21658968/