Как дочерний элемент <p> может занять всю высоту родительского элемента <header> и отображаться в нижнем правом углу родительского элемента?

Я хочу, чтобы дочерний элемент <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;
}

Текст свешивается в верхнем правом углу.

css twitter-bootstrap

01.01.2019 17:19

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 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>

Отличное решение, но может быть целесообразно добавить запасной вариант

— 01.01.2019 19:52

01.01.2019 19:46