我可以防止 CSS 属性 Content 覆盖 min-height 属性吗？答案

【问题标题】：Can I prevent the CSS property Content from overriding the min-height property?我可以防止 CSS 属性 Content 覆盖 min-height 属性吗？
【发布时间】：2018-10-31 06:51:51
【问题描述】：

我正在使用 Dragula 在我的一些 MVC 视图上实现拖放。

有时源区域或目标区域都是空的。

在任何一个为空的情况下，我想显示一个带有最小高度和虚线边框的“占位符”，并带有文本“Drop Here...”，以使用户在视觉上更清楚该做什么。

我在父级上添加了一个名为 CheckEmpty 的类，并在 CSS 中添加：

.CheckEmpty:empty::after {
min-height:4em;
background-color:lightcyan;
border:dashed 2px #D9D9D9;
border-radius: 5px;  
content: "Drop Here...";
}

问题在于内容属性似乎覆盖了最小高度，并且边框仅围绕文本。移除 content 属性可以让 CSS 以正确的最小高度正确显示占位符，并且它还填充了容器的宽度。

有没有办法防止这种情况发生，还是我需要从不同的角度解决这个问题？

【问题讨论】：

尝试行高而不是最小高度。它也为您提供中间对齐...
为什么必须使用 content 属性。如果您的元素是 html div 元素，那么您可以添加文本“Drop here...”根据您的要求添加填充、最小宽度和行高。我认为这里不需要伪类。
具有类 CheckEmpty 的父 div 填充了来自 Ajax 调用的子 div，我真的只想在没有子 div 的情况下显示占位符，而不使用 javascript 删除占位符如果不为空。看来我可能不得不走那条路。
你能创建一个小提琴供我们检查吗？
jsfiddle.net/ou46nedb 这是基本代码，虽然 CSS 没有显示占位符，但不确定我是否应该添加其他内容？

标签： css asp.net-mvc dragula

【解决方案1】：

这不是关于 content 而是关于 ::after ！ ::after 破坏了 Dragula 中所有关于 size 的样式。所以，最好不要使用after 使用简单的 CSS 并通过代码或直接在 HTML 标签中添加您的内容：

.CheckEmpty {
    min-height:4em;    
    background-color:lightcyan;
    border:dashed 2px #D9D9D9;
    border-radius: 5px;     

}

(".CheckEmpty").html("Drop Here2...");

https://jsfiddle.net/ou46nedb/4/

【讨论】：

【解决方案2】：

我从来没有只使用 CSS 来完成这项工作，所以最后还是回到使用 javascript 检查 div 是否为空并应用所需的 css 类。

【讨论】：