Html <；部门>；在另一个内部<；部门>；相同的百分比，但内部重叠？

我在

div

中有一个

div

，两者都是基于页面的百分比，但是嵌套的

div

稍微向右重叠

实际上，我正试图让白色框位于第一个浅蓝色

div

的内部，四周有一个小的

边距

，这样你就可以看到一点较暗的背景颜色，使它更加突出

编辑以指出

位置：fixed

的作用是使白色框在滚动时移动

发布了一个解决方案，其中包括将

位置

更改为

相对位置

，尽管这显然会阻止盒子移动

div{
边界半径：5px；
}
#标题{
高度：50px；
背景色：#F38630；
边缘底部：10px；
}
.左{
高度：1300px；
宽度：25%；
背景色：#A7DBD8；
浮动：左；
边缘底部：10px；
}
.对{
高度：1300px；
宽度：75%；
背景色：#E0E4CC；
浮动：对；
边缘底部：10px；
}
#页脚{
高度：50px；
背景色：#69D2E7；
明确：两者皆有；
}
#固定左{
高度：50px；
宽度：25%；
背景色：#FFFFFF；
位置：固定；
保证金：1px 1px 1px 1px；
}

结果

请试试这个，而不要吃

#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;

}

---

您的边距随着宽度的增加而增加

尝试：

如果加载jQuery

$(window).bind("resize", function(){
    $("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})

---

我猜这个问题是由于默认的

body

margin

造成的，因为它不会影响您的

fixed

div

的

width

（正如您在示例中看到的，它的

width

始终是相同的，不管您设置了什么

margin

值，与容器的

width

）：

将其推出容器的内部

边距（
1px
）仍然存在问题，您可以使用
calc
，以下是一个示例：

这正是我想要的，因为在深蓝色背景中白色框的定位。当屏幕滚动时，除了position:fixed属性外，是否有其他方法可以使div位置移动？我想让这个盒子能够像屏幕一样移动。我会使用
#fixedleft{高度：50px；背景色：FFFFFF；边距：1px 1px 1px；}
但可能位置：fixed在其他点calc（25%-6px）很有用似乎还不错，不知道这个thx的帖子@交替使用
框大小：边框框
与旧浏览器更兼容，可能更快。你可以从css3please.com获得其他带前缀的版本。有人提到Calc（我不知道），我正在研究它thx的body margin:0建议，并感谢JSFiddle！
#fixedleft {
    height: 50px;
    width: calc(25% - 2px);
    background-color: #FFFFFF;
    position: fixed;
    margin: 1px;
}

$(window).bind("resize", function(){
    $("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})

body { margin:0; }