Question

我正在尝试创建一个带有响应内容div的固定侧栏，其宽度必须为732px，左右为20px。为了达到这个目的，我使用了侧杆和导航杆固定位置。然后应用margin-left，以便在侧栏之后开始内容div。

我正在努力应对响应部分。我在媒体查询部分保留了248px的余量，以便内容div在侧栏后仍然开始。我很难找到px到％。我将100％应用于内容div，然后强制内容通过侧边栏的宽度（228px + 20px间隙）超出包装器。所以我从100％带走了侧杆248px的宽度，这让我留下了一个很大的间隙。我在右边添加了另外20px，这样内容div的左右两边相等。然而，差距仍然存在。

我不确定是否可以同时使用％和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;
    }

}

Answer 1

没有必要给内容元素一个明确的宽度。

您需要做的就是给它一个左上边距，不要被固定元素覆盖。块级元素的默认行为是占用所有水平空间！

通常使用像'px'这样的绝对单位是一个坏主意，特别是在响应式布局方面。并且设置高度通常会导致“不必要的结果”。

但为了证明这是可能的，我已经设置了DEMO。

width: 100%;

div等块级元素不需要这样做。

该演示的实际差距为20px。如果你想让元素彼此相邻（因为background-color / -image），那么只需将#content的margin-left设置为228px并使用padding-left: 20px;。

就是这样......！

发布混合px和％以响应响应布局

1 个答案: