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

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这样的块级元素不需div ！

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

而已 ...！

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-02-13 12:02:57

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-02-13 12:02:57

解决方案1
1 已采纳 2014-02-13 12:02:57