CSS内分区填充外分区

我是CSS新手，有一个关于扩展内部DIV的内容以填充整个外部DIV的问题

我已经研究了几个小时我的问题的答案，发现了几十个类似的问题，但没有一个建议的解决方案适合我。我肯定是我误解了一些基本的东西，但我似乎不能把我的手指放在上面

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

文本装饰

规则

<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内容放在

外部容器中

悬停机制不一致

我希望我说的有道理…就像我说的，我在解释设计方面的事情时很糟糕

---

有什么建议吗？

为什么不能将背景颜色更改为位于父容器

。外部容器

这将解决你眼前的问题

请参见
为什么不能将背景颜色更改为位于父级
上。外部容器

这将解决你眼前的问题

请参见
您只需将背景颜色设置为外部容器

当您将
背景色设置为
时

下面是片段


。外部容器{
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
背景#337AB7；
}
.内胆{
背景色：#337AB7；
颜色：#fff；
身高：100%；
字号：x大号；
}
一些其他的东西
更多不同的内容
您只需将背景颜色设置为
外部容器

当您将
背景色设置为
时

下面是片段


。外部容器{
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
背景#337AB7；
}
.内胆{
背景色：#337AB7；
颜色：#fff；
身高：100%；
字号：x大号；
}
一些其他的东西
更多不同的内容
如果外部容器的响应没有帮助，另一种方法是在内部容器上设置
显示：block
。块级元素是默认情况下占用父级上所有可用水平空间的一个元素（一个例子可能是这些答案中的一个），而“内联级别”元素，如<代码> a <代码>（默认情况下），可以放置在文本块的中间，仅影响其自身的文本，而不会在其周围重新流动任何布局。
为了防止外部容器响应无效，另一种方法是在内部容器上设置
显示：block
。块级元素是默认情况下占用父级上所有可用水平空间的一个元素（一个例子可能是这些答案中的一个），而“内联级别”元素，如<代码> a <代码>（默认情况下），可以放置在文本块的中间，仅影响其自身的文本，而不会在其周围重新流动任何布局。
如果a是您，我将制作一个div容器，并在div（innerContainer）内插入a-link-tag。因此，Conainer做它所称的（包含某些内容），根据您的需要应用颜色，链接也可以正常工作

像这样：

<div class="outer-container">
     <div class="inner-container" >
        <a href="http://www.google.com" target="_blank">Lorem ipsum dolor sit</a>
     </div>
 </div>

如果a是你，我会制作一个div容器，并在div（innerContainer）内插入a-link-tag。因此，Conainer做它所称的（包含某些内容），根据您的需要应用颜色，链接也可以正常工作

像这样：

<div class="outer-container">
     <div class="inner-container" >
        <a href="http://www.google.com" target="_blank">Lorem ipsum dolor sit</a>
     </div>
 </div>


是的，这就是我问题的答案。不幸的是，我的实际问题比我的问题要复杂一些，这并没有解决它（+1表示原始问题的解决方案-但我将更新以包含所有内容。是的，这是我问题的解决方案。不幸的是，我的实际问题比我的问题复杂一些，但这并没有解决问题。（+1表示原始问题的解决方案-但我将更新以包含所有内容。