在网站上填充一定数量的空白答案

【问题标题】：Filling a certain amount of whitespace on website在网站上填充一定数量的空白
【发布时间】：2023-03-09 20:05:01
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

#通知{
   ……
   高度：200px；
   宽度：100%；
}

或者，您可以使用 min-height 和 min-width。

【讨论】：

【解决方案2】：

我通过设置固定高度来做到这一点。

我还听说过这样的论点，即让页面向下滚动是可以的，（这就是 stackoverflow 的工作原理），因为它会引起人们对消息的注意，这是一件好事。

【讨论】：

【解决方案3】：

解决方案可能取决于您希望/必须如何实施此通知块。如果您使用 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 高度的问题，但这是另一个问题 :)

【讨论】：

我只提供了必需品，但您可以填补空白，例如。将您的原始颜色和文本样式放在 .info 类等下。如果您确定永远不会有不同类型的通知栏，请考虑我的建议无关紧要。

【解决方案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;
}

【讨论】：