css 溢出元素的尺寸和位置

Question

我将从代码和图像开始，这样可以更轻松地解释我想要实现的目标和我面临的问题。

 body,
 html {
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
 }
 .container {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: 10px;
   border: 1px solid black;
 }
 .topPanel {
   flex-grow: 1;
   background-color: green;
 }
 .bottomPanel {
   padding: 10px 0px;
   position: relative;
   background-color: black;
 }
 .bottomPanel .alert {
   position: relative;
   top: -35px;
   background-color: grey;
   text-align: center;
 }
 .bottomPanel .message {
   color: white;
   text-align: center;
 }

<div class="container">
  <div class="topPanel"></div>
  <div class="bottomPanel">
    <div class="alert">
      alert
    </div>
    <div class="message">
      message
    </div>
  </div>
</div>

(code in JSFiddle)

外观：

topPanel 占据容器的大部分高度，bottomPanel 的高度可以变化。

alert 元素需要具有 bottomPanel 的宽度并恰好在其上方（在 code/image 中它们之间有一个间隙但这只是为了表明它在上方它，差距不应该在那里）。
alert 高度也可以变化，高度不应硬编码，但与 bottomPanel.

相关

alert 在逻辑和语义两个方面都应该是 bottomPanel 的子代而不是 topPanel.

我面临的问题是 position: relative 的高度 topPanel 包括 alert 的高度，即使它溢出了。
如果我添加 overflow，则 alert 不可见。
如果我更改为 position: absolute，则 alert 的宽度不会扩展，width: 100% 将使其具有 container 的宽度，而不是父元素的宽度。

有什么想法可以让我只使用 css 吗？
我也考虑过在这里使用 flex，但认为也许有人会有更好的主意。

谢谢。

Answer 1

在你的 bottomPanel

bottom:0

给 padding:10px 0 给 .alert
重置line-height

*,
*:before,
*:after {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid black;
}
.topPanel {
  flex-grow: 1;
  background-color: green;
}
.bottomPanel {
  position: relative;
  bottom: 0;
  background-color: black;
}
.bottomPanel .alert {
  background-color: rgba(255, 255, 255, .7);
  text-align: center;
  padding: 10px 0;
}
.bottomPanel .message {
  color: white;
  text-align: center;
  padding: 10px 0;
}

<div class="container">
  <div class="topPanel"></div>
  <div class="bottomPanel">
    <div class="alert">
      alert
    </div>
    <div class="message">
      message
    </div>
  </div>
</div>

Answer 2

使 .bottomPanel 成为自己的弹性容器，添加 position:relative。

那么.alert可以是：

.bottomPanel .alert {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.topPanel {
  flex: 1;
  background-color: green;
}
.bottomPanel {
  display: flex;
  flex-direction: column;
  background-color: black;
  position: relative;
}
.bottomPanel .alert {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 100%;
  color: white;
}
.bottomPanel .message {
  color: white;
  text-align: center;
}

<div class="container">
  <div class="topPanel"></div>
  <div class="bottomPanel">
    <div class="alert">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, voluptatum.
    </div>
    <div class="message">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequatur enim laboriosam excepturi ex nulla dolorum vitae, officia sapiente, laborum? Possimus eius odio, recusandae tempora, soluta harum minus consequatur quibusdam, blanditiis
      in voluptatum sit laborum!
    </div>
  </div>
</div>

css 溢出元素的尺寸和位置

dimensions and position of overflow element with css

html

css

position

flexbox

外观：