右边距未显示

下面是我的CSS和HTML代码。如您所见，右侧的边距没有到来。

谁能告诉我原因？
HTML，CSS的结构正确吗？我必须在页面中间显示两个窗口以及一个页脚和一个页眉。所以，我把一切都定位为绝对的。

这是正确的做法吗？

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    min-width: 100vh;
}
.wrapper{
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    background-color: #666;
    overflow-x: hidden;
}
.header{
    position: absolute;
    margin: 0;
    top: 0%;
    height: 10%;
    width: 100%;
    background-color: #fff;
}
.footer{
    position: absolute;
    bottom: 0%;
    height: 10%;
    width: 100%;
    background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
    position: absolute;
    width: 100%;
    top: 10%;
    bottom: 10%;
    background-color: #eee;
    margin: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Layout</title>
</head>
<body>
<div class="wrapper">
    <div class="header"> </div>
    <div class="window">
        <div class="sub-window left-window"> </div>
        <div class="sub-window right-window"> </div>
    </div>
    <div class="footer"> </div>
</div>
</body>
</html>

应用宽度calc喜欢

.window {
    background-color: #eee;
    bottom: 10%;
    margin: 10px;
    position: absolute;
    top: 10%;
    width: calc(100% - 20px); /*You apply margin:10px;*/
}

这只是

因为您的宽度是 100%，并且您应用了 20 像素的边距（边距-左：10，边距-右：10）=>实际上它需要 100% + 20 像素的空间。这就是您可以在右侧追踪边距的原因。

在您的 .window 上使用 width: calc(100% - 20px);，它将正常工作。

*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
body{
	min-height: 100vh;
	min-width: 100vh;
}
.wrapper{
	position: absolute;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	background-color: #666;
	overflow-x: hidden;
  
}
.header{
	position: absolute;
	margin: 0;
    top: 0%;
    height: 10%;
    width: 100%;
    background-color: #fff;
}
.footer{
	position: absolute;
	bottom: 0%;
	height: 10%;
	width: 100%;
	background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
	position: absolute;
	width: calc(100% - 20px);
	top: 10%;
	bottom: 10%;
	background-color: #eee;
	margin: 10px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Layout</title>
</head>
<body>
<div class="wrapper">
	<div class="header">
	</div>
	<div class="window">
		<div class="sub-window left-window">
			
		</div>
		<div class="sub-window right-window">
			
		</div>
	</div>
	<div class="footer">
		
	</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：