Question

下面是我的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>

Answer 1

应用宽度calc，如

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

Answer 2

这只是因为你的宽度是100％并且你应用了20 px的边距（margin-left：10，margin-right：10）=＆gt;实际上它需要100％+ 20px的空间。这就是你可以追踪右边边距的原因。

在.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>

保证金权利未显示

2 个答案: