这个问题可能已经被打死了,但是在查看帖子和谷歌搜索后,我找不到一个功能代码来让它工作,我尝试的任何东西都没有做到这一点。
我想将所有(上,左,下,右)页边距设置为1%,但我没有做任何工作。我能让它工作的唯一方法是使用我想避免的高度和宽度属性手动调整图像大小。
理想情况下,我喜欢这样的事情:
body, html {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
}
但这并不奏效。有关实现这一目标的任何干净,直截了当的建议吗?
答案 0 :(得分:1)
您的保证金正常。但是,页边距不适用于position:fixed
元素。
这不是故障,而是根据the W3C specs的设计。将左/右/上/下放在固定元素上将相对于视口(您的窗口)移动它。它甚至不会检查<body>
或任何其他父元素的边距。毕竟,position:fixed的设计使得元素保持固定在窗口的一部分上,即使在滚动时......它也需要完全独立于其他元素才能以这种方式运行。
那么为什么要改变顶级&#39;并且&#39;离开&#39; body
的填充/边距似乎有用吗?
因为position:fixed基本上分两步计算:
所以在这里你的例子会发生什么:
<div>
是位置:静态,那么它们将从中开始
左上角,但由于这个原因,被推下1%并留下1%
<body>
&#39}}边距/填充。<div>
设置任何左/右/上/下,所以它
永远留在原地。<div>
上有一个right: 0
;并且因为它没有
真的关心任何人的边距/填充,它会像天生就一样直接进入窗口的右边缘。基本上,<body>
会间接地影响<div>
,但设置right: 0;
会让所有人感到震惊。
不要担心在<body>
上添加填充/边距,从而获得难以预测的结果。而是将CSS直接应用于固定元素。例如:
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
div.nw {
height:50%;
width:50%;
position:fixed;
top: 0;
left: 0;
background-color:#ff0;
padding: 1% 0 0 1%;
}
div.ne {
height:50%;
width: 50%;
right: 0;
top: 0;
padding: 1% 1% 0 0;
background-color:blue;
position:fixed;
}
在此处查看此行动:http://codepen.io/anon/pen/isDhA
修改强>
如果你不想要靠近边缘的背景颜色,只需将上述技术与一些简单的内部div结合起来。例如:http://codepen.io/anon/pen/lDebh
编辑2:
在评论中进一步讨论后,根据您的需要,提供其他一些建议。
&#34;我想在窗口的每个角落都有相同大小的div。它应该固定在背景中,因此它不会滚动其他所有内容&#34;
使用此方法:http://jsfiddle.net/fettj66r/9/
.corner {
position: fixed;
width: 50%;
height: 50%;
z-index: -1;
}
.nw {
background: red;
left: 1%;
top: 1%;
}
.ne {
background: green;
right: 1%;
top: 1%;
}
.sw {
background: blue;
left: 1%;
bottom: 1%;
}
.se {
background: black;
right: 1%;
bottom: 1%;
}
&#34;我想在窗口的每个角落都有相同大小的div。它应滚动其他所有内容。&#34;
使用此方法:http://jsfiddle.net/fettj66r/10/
body {
position: relative;
margin: 1%;
}
.corner {
position: absolute;
width: 50%;
height: 50%;
z-index: -1;
}
.nw {
background: red;
left: 0;
top: 0;
}
.ne {
background: green;
right: 0;
top: 0;
}
.sw {
background: blue;
left: 0;
bottom: 0;
}
.se {
background: black;
right: 0;
bottom: 0;
}
如果您对上述技术有任何疑问,或者这不是您所需要的,请随时在评论中提问。
答案 1 :(得分:0)
body, html {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
width:98%;
height:98%;
}
用于设置高度边距,您必须设置高度