使用css

Question

我将从代码和图片开始，这将使我更容易解释我想要实现的目标以及我所面临的问题。

＆＃13;

＆＃13;

 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;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（code in JSFiddle）

它的外观：

topPanel占据容器的大部分高度，而bottomPanel的高度可能不同。

alert元素需要具有bottomPanel的宽度并且正好在它之上（在代码/图像中，它们之间存在差距，但这只是为了显示它高于它，差距不应该存在） alert高度也可以变化，高度不应该是硬编码的，而是与bottomPanel相关。

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

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

我有什么想法可以让它只用css吗？
我想也许在这里使用flex，但是想到也许有人会有更好的主意。

感谢。

Answer 1

• 在bottom:0
中设置bottomPanel
• 将padding:10px 0提交给.alert
• 重置line-height

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将.bottomPanel设置为自己的flex容器，添加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>