CSS 内部 Div 填充外部 Div

Question

我是 CSS 新手，对扩展内部 DIV 的内容以填充整个外部 div 有疑问。

几个小时以来，我一直在研究我的问题的答案，并发现了数十个类似的问题，但建议的解决方案都不适合我。我敢肯定这是我误解了一些基本的东西，但我似乎无法理解它。

我需要让蓝色背景覆盖“其他一些东西”和“更多不同的东西”之间的整个 block ，并且文本必须在蓝色 block 中垂直和水平居中 - 并保持相同的悬停质量和 文字修饰规则。

<div>
    <span>Some other stuff</span>
</div
<div class="outer-container">
    <h2>
        <a class="inner-container" href="https://www.google.com" target="_blank">
            Lorem ipsum
        </a>
    </h2>
</div>
<div>
    More different stuff
</div>

我在 CSS 方面遇到了很多麻烦，因为我不知道如何优雅地描述我想要的东西 - 我是开发人员而不是设计师!

.outer-container {
  background-color: #337AB7;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.inner-container {
  background-color: #337AB7;
  color: #fff;
  height: 100%;
  font-size: x-large;
  &:focus, &:hover, &:link {
    background-color: #286090;
    color: #fff;
    text-decoration: none;
  }
}

如果我将 focus、hover CSS 内容放在 outer-container 中，悬停机制将不一致。

我希望我说得有道理...就像我说的，我解释设计的东西很糟糕。

有什么建议吗？

Answer 1

你只需要将背景颜色设置为outer-container .

当您设置 background-color 时至 <a>标签，背景色仅分配给文本。

这是你更新的fiddle .

这是片段。

.outer-container {
  text-align: center;
  vertical-align: middle;
  position: relative;
  background: #337AB7;
}
.inner-container {
  background-color: #337AB7;
  color: #fff;
  height: 100%;
  font-size: x-large;
}

<div> <span>Some other stuff</span>

</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>

</div>
<div>More different stuff</div>