Question

我有简单布局的问题。它应该是这样的：

我的代码如下：

body{
  margin: 0;
  padding: 0;
  color: white;
 }
#black{
  background: black;
  width: 100%;
  margin: 0;
  padding: 0;
}
#grey{
  background: grey;
  width: 100%;
  margin: 2em;
 }

<body>
  <div id="black">
    <p>something</p>
    <div id="grey">
      <p>2#something</p>
    </div>
  </div>
 </body>

不幸的是，这种方法是错误的，因为会出现滚动条。我需要一个响应式解决方案。

Answer 1

只是不要在body{ margin: 0; padding: 0; color: white; } #black{ background: black; width: 100%; margin: 0; padding: 0; } #grey{ background: grey; margin: 2em; margin-right:0; }上设置宽度，并删除右边距：

<body>
  <div id="black">
    <p>something</p>
    <div id="grey">
      <p>2#something</p>
    </div>
  </div>
 </body>

#grey

由于{{1}}是div，并且默认情况下是块元素，因此它将填充可用空间。

Answer 2

实际上，接受的答案是“有点”错误，因为没有考虑p因margins默认使用而出现的collapsing margins

块的顶部和底部margin有时会合并（折叠）成为单个padding，其大小是合并的最大边距进入它，一种称为边缘崩溃的行为。

所以你应该margin和body, p { margin: 0; color: white; } #black { background: black; width: 100% } #grey { background: grey; padding: 2em 0 2em 2em; margin: 2em 0 0 2em; }

<body>
  <div id="black">
    <p>something</p>
    <div id="grey">
      <p>2#something</p>
    </div>
  </div>
</body>

var clients = new Array();
//-----

var tmp = new Array();
tmp["connection"] = connection;
tmp["authentificated"] = 1;
tmp["username"] = rows[0].username;
tmp["rank"] = rows[0].rank;
clients.push(tmp);

窗口全宽边框

2 个答案: