css - 修复了 100% 宽度的位置问题

Question

我在使用的时候遇到了如下错误

.high-secuity {
    position: fixed;
    top: 0;
    background: #ff782f;
    color: #fff;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    margin-left: -15px;
}

问题是橙色面板超出了屏幕。我该如何解决这个问题？不想使用固定宽度，因为它应该是响应式的

Answer 1

使用 width: inherit; 到我的示例正在运行的橙色 block

body {
  background-color: #ccc;
}

.container {
  position: relative;
  width: 300px;
  background-color: #fff;
  overflow: hidden;
  padding: 50px 15px;
}

.high-secuity {
  position: fixed;
  top: 0;
  background: #ff782f;
  color: #fff;
  width: inherit;
  border-radius: 0;
  margin-bottom: 0;
  margin-left: -15px;
  padding: 15px;
}

<div class="container">
  <h1>Osloskolen</h1>
  <div class="high-secuity">Your message</div>
</div>