Css 孩子怎么能<；p>；元素获取父元素的所有高度<；标题>；元素并显示在父元素的右下角？_Css_Twitter Bootstrap

Css 孩子怎么能<；p>；元素获取父元素的所有高度<；标题>；元素并显示在父元素的右下角？

css twitter-bootstrap

Css 孩子怎么能<；p>；元素获取父元素的所有高度<；标题>；元素并显示在父元素的右下角？,css,twitter-bootstrap,Css,Twitter Bootstrap,我希望子元素应该占据父div标记的所有高度，并且我可以将p元素文本放在父元素的右下角我使用了引导和下面的代码 <!DOCTYPE html> <html><head> <title>Lynda Training</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.c

我希望子

元素应该占据父div标记的所有高度，并且我可以将p元素文本放在父元素的右下角
我使用了引导和下面的代码
<!DOCTYPE html>
<html><head>
  <title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div class="row">
    <div class="container-fluid">
        <header class="bgimage">
          <div class="container">
          <p>This is the image of the bottle.</p>
          </div>
        </header>
      </div>
</div>

<div class="row">
  <div class="container">
      <header class="bgimage">
      </header>
    </div>
</div>

<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>

文本向右上角挂起。
Flexbox可以做到这一点

.container fluid.bgimage{
背景：粉红色；
高度：100px；/*用于演示*/
显示器：flex；
弯曲方向：立柱；
}
.集装箱{
弹性：1；
}
p{
背景：浅蓝色；
身高：100%；
显示器：flex；
证明内容：柔性端；
对齐项目：柔性端；
}

这是瓶子的图像
很好的解决方案，但添加回退可能是明智的
body, html {
  margin:0;
  padding:0;
}

.container-fluid .bgimage, .container .bgimage {
  background-image: url("/images/bottle.jpg");
  background-position: center center;
  background-size: cover;
  height: 400px;
}

.container p {
  color: white;
  flex-flow: column;
  text-align:right;
  height: 400px;
  vertical-align: text-bottom;
}