- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要将片段中的元素着色得更深。为此,我有一个部分透明的黑色覆盖元素。我希望它能够完整地覆盖红色元素。问题是,我无法将叠加层设置为 100% 高度。为什么这行不通,如何在不指定确切高度的情况下让它工作?
.overlay-shell {
position: relative;
top: 0;
left: 0;
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
height: 60px; /* how do I get this to take 100% of the height? */
width: 100%;
position: absolute;
}
ul.alarms {
list-style: none;
margin: 0 30px;
}
ul.alarms li.alarm {
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c53635), color-stop(50%, #9d2b2a), color-stop(51%, #952928), color-stop(100%, #9d2b2a));
background-image: -moz-linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
background-image: -webkit-linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
background-image: linear-gradient(#c53635 0%, #9d2b2a 50%, #952928 51%, #9d2b2a 100%);
}
ul.alarms .content {
}
ul.alarms li .right-sidebar {
float: right;
max-width: 180px;
}
ul.alarms .bottom-bar {
clear: both;
}
.response-btn {
display: inline-block;
width: 20%;
text-align: center;
margin: 0px;
padding: 0px;
}
<html>
<ul class="alarms">
<li class="alarm" id="alert_87590">
<div class="overlay-shell">
<div class="overlay"></div>
</div>
<div class="content">
<div class="primary">
<a href="/senior/1828"><h1 class="provisioned-service-name">Hannah Montana</h1>
</a>
</div>
</div>
<div class="right-sidebar">
<p>
<a class="address" href="/senior/1828">Unit 128</a>
</p>
</div>
<div class="bottom-bar">
<div class="response-btn">
<span>Yes</span>
</div><div class="response-btn">
<span>OK</span>
</div><div class="response-btn">
<span>Thank you</span>
</div><div class="response-btn">
<span>Custom</span>
</div><div class="response-btn">
<span>Roger</span>
</div>
</div>
</li>
</ul>
</html>
最佳答案
将 .overlay 的高度设置为 100vh,即等于视口(viewport)高度:
overlay {
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
height: 100vh;
width: 100%;
position: absolute;
}
你仍然会得到整个页面高度的黑色覆盖层
关于html - 占用父元素高度 100% 的 CSS 覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27323794/
我正在阅读 SQL/92(我是新手),它经历了不同的数据类型。其中之一是CHAR,我当然知道它与java中的String非常相似,而不是java中的char。但我们假设它是 CHAR(1)。只有一个字
我的 mysqld 进程消耗了 232% 的 CPU,并且有 14000 多个连接 (我对这件事有点陌生,但关注 Stack Overflow 寻求帮助)。 顶部: PID USER P
Tomcat 服务器占用 100% 的 CPU,但仅在 PRD。我们无法在其他环境中重现这一点。 进行线程转储后,我们发现有一些线程处于等待/可运行状态,但无法找到我们如何找到根本原因。 你能帮忙吗?
我正在使用 Xcode、SpriteKit 和 Swift 构建我的第一款 iPhone 游戏。我对这些技术不熟悉,但我熟悉一般的编程概念。 这是我想用英语做的事情。我想让圆圈随机出现在屏幕上,然后开
我的套接字消耗了 100% 的计算机 CPU。有 150 个客户端每 30 秒异步向服务器发送消息。有谁知道如何解决这个问题?下面是我的 ServerSocket 类 public class Ser
一段时间后(有时几分钟,有时几天),我的应用开始消耗 100% 的 CPU。正如我从 VisualVM 看到的那样,它总是发生在 org.elasticsearch.common.netty.chan
在我的容器 Controller 中,用户可以平移 View 以切换到不同的 View 。当平移手势开始时,它会将新 View Controller 的 View 添加到 View 中:view.in
假设我在数据框中有两列,其中一列不完整。 df = pd.DataFrame({'a': [1, 2, 3, 4], 'b':[5, '', 6, '']}) df Out: a b
在Ubuntu 16.04 LTS中,pyteserract脚本吃得太高,导致系统间歇性重启。 top命令输出为 top - 21:23:31 up 27 min, 4 users, lo
我在具有 88 个内核和 60 个 reducer 的 hadoop 集群上运行 mapreduce 作业。由于某种原因,它只使用了 79 个集群核心。开始时它运行 79 个映射器,但当完成一半拆分时
我正在对机器上的所有用户进行查询,当它执行时,它会占用 100% 的 CPU 并锁定系统。我已经等了 5 分钟,但什么也没有发生。 在任务管理器中,wmiprvse.exe 占用了所有 CPU。当我终
我正在从套接字(通过 TCP 协议(protocol))读取消息,但我注意到 CPU 花费大量时间来调用 BufferedInputStream 的 available() 方法。这是我的代码:
我有 6 个线程。其中一个线程进入某个范围并打开“锁定”和所有其他线程线程正在等待并希望进入相同的范围。 现在,其他线程是否会获得 CPU 时间?其他线程是否在线程调度中?我知道所有其他线程都处于等待
我正在尝试创建一个社交媒体应用程序。但它需要大约 300mb 内存。所以我的主页上有 5 个包含帖子的 fragment 。总体内存使用量为 250-300mb 然后为了测试,我禁用了这些 fragm
我有一个带有一些 TextFormField 的表单,我想扩展最后一个 TextFormField 以占据屏幕的其余部分。最后一个 TextFormField 可以有多行文本。 我没能做到这一点,并尝
我收到磁盘几乎已满的警告,所以我运行 DaisyDisk .. 显然 Xcode 占用了 15GB 的空间: http://imgur.com/a/cTIZZ iOS 设备支持为 12.3 GB: h
我正在使用 Xcode Playground 研究 Swift 内存布局,我创建了一个带有 bool、double 和 int32 的结构,如下所示。基于这种结构,MemoryLayout 的打印结果
一旦执行“self.navigationController pushviewcontroller:vc animated:YES”,我的 CPU 就会达到 100%。我在 Stack Overflo
警告:CPU 使用率达到 100%,请小心。 Link to the jsFiddle 编写此脚本是为了设计动态蛇梯板。每次刷新页面时,都会创建一个新板。大多数时候所有的背景图像都不会出现,CPU 使
我不知道为什么,但是MYSQL给CPU带来了很大的负载。我必须每秒多次更新数据库,并且用户群正在不断增长。 一开始还好,但是现在 CPU 负载每天都在增加 这是日志中的慢速查询: *Query_tim
我是一名优秀的程序员,十分优秀!