Question

在我的网络应用中，我使用以下CSS提供通知/错误消息：

#notice { 
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}

但是当不需要通知时，我希望白色空间等于此通知将占用的空间量。我想这样做，以便我的网页看起来一致，并且根据是否有通知，页面上的项目不会向上/向下移动。

Answer 1

我是通过设定固定高度来完成的。

我也听过这样的论点，即可以让页面崩溃，（这就是stackoverflow的工作原理），因为它引起了对消息的注意，这是一件好事。

Answer 2

解决方案可能取决于您希望/必须如何实施此通知块。如果您使用Ajax更新页面（没有优雅降级，JS关闭后退到正常状态）我强烈建议使用Facebook等模式窗口执行此操作 - 它非常好用。如果你没有机会使用模态窗口，它可能是：

#notice{ height: 100px; margin: 1em 1em 2em } /* #notice can be a wrapper with basic dimensions */
.error{ border: 1px solid red; } /* reuse the same block */
.info{ border: 1px solid green; } /* reuse the same block */

分别是HTML：

<div id="notice"></div>

错误状态：

<div id="notice" class="error"> Your error message </div>

信息状态：

<div id="notice" class="info"> Your info message </div>

当消息太长时，你可能会遇到#notice div高度的问题，但这是另一个问题：）

Answer 3

您可以为div设置固定的高度和宽度。

#notice {
   ....
   height: 200px;
   width: 100%;
}

或者，您可以使用最小高度和最小宽度。

Answer 4

如果您不需要，我假设#notice不会存在div。为什么不这样使用相邻的选择器。它不适用于IE6等浏览器。给它后面的元素“跟随”或类似的东西。仍然会有一点区别，因为你的边界有2px。

#notice {
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}
.following {
    margin-top:4em
}
#notice + .following {
    margin-top:2em;
}

在网站上填写一定数量的空白

4 个答案: