Question

我在div内有一个div，两者都是基于页面的百分比，但嵌套的div略微向右重叠。

我实际上试图将白框放在第一个浅蓝色div内，四边都有一个小margin，这样你就能看到一些较暗的背景色，它更突出。

编辑指出position:fixed的点是在滚动时使白框移动。

发布了一个解决方案，其中涉及将position转换为relative，但这显然会阻止此框移动。

JSFiddle

enter image description here

＆＃13;

div {
	border-radius: 5px;
}

#header {
	height: 50px;
	background-color: #F38630;
	margin-bottom: 10px;
}

.left {
    height: 1300px;
	width: 25%;
	background-color: #A7DBD8;
	float: left;
	margin-bottom: 10px;
}

.right {
	height: 1300px;
	width: 75%;
	background-color: #E0E4CC;
	float: right;
	margin-bottom: 10px;
}

#footer {
	height: 50px;
	background-color: #69D2E7;
	clear: both;
}

#fixedleft {
    height: 50px;
    width: 25%;
    background-color: #FFFFFF;
    position: fixed;
 	margin: 1px 1px 1px 1px;
}

＆＃13;

<html>
	<head>
		<title>Result</title>
	</head>
	<body>
		<div id="header"></div>
		<div class="left"><div id="fixedleft"></div></div>
		<div class="right"></div>
		<div id="footer"></div>
	</body>
</html>

＆＃13;

Answer 1

您的保证金随着宽度而增加。

尝试：

#fixedleft {
    height: 50px;
    width: calc(25% - 2px);
    background-color: #FFFFFF;
    position: fixed;
    margin: 1px;
}

Answer 2

我想这个问题归因于默认body margin，因为它不会影响width fixed的{{1}}（因为你可以在示例中看到，div始终是相同的，无论您设置的width值是什么，都不像容器的margin}：

width

内部body { margin:0; }（margin）仍有问题将其推出容器，您可以使用1px，这是一个示例：

JSFiddle

Answer 3

#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}

请尝试此而不是

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

}

Answer 4

如果你加载jQuery ..

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

<div>在另一个<div>相同的百分比内，但内部重叠？</div> </div>

JSFiddle

4 个答案:

JSFiddle