Question

我希望子<p>元素应占据父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>

styles.css：

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

文字朝右上角悬挂。

Answer 1

Flexbox可以做到这一点。

.container-fluid .bgimage {
  background: pink;
  height: 100px; /* for demo purposes */
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

p {
  background: lightblue;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<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>

子<p>元素如何占据父</p> <header>元素的所有高度并显示在父元素的右下角？

1 个答案: