Заполнить оставшуюся высоту Content Div

Я с нетерпением жду возможности сделать это в CSS:

 ---------------------
| Some Super long     |
| Span Text           |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|_____________________|
|          |          |
|   YES    |    NO    |
|__________|__________|

Ниже мой код:

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}

<div data-container = "" class = "page-container" style = "height: 92.5%;">
  <div id = "b3-b2-ContentPlaceholder" style = "background-color: #cecece;">
    <div style = "">
      <span data-expression = "" style = "">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container = "" class = "yes-no-buttons-container">
      <div>
        <div data-container = "" class = "">
          <button data-button = "" type = "button" style = "width: 49%;">
                            <span data-expression = "">Yes</span>
                        </button>
          <button data-button = "" type = "button" style = "width: 49%; margin-left: 2%;">
                            <span data-expression = "">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

Я не могу создать div содержимого, чтобы заполнить оставшуюся высоту диапазоном внутри в качестве единственного дочернего элемента содержимого.

Есть какие-нибудь советы?

почему position:absolute страничке-контейнеру?

— 03.08.2018 07:15

Я не могу понять, что вы имеете в виду под «заполнить оставшуюся высоту с диапазоном внутри как единственным дочерним элементом содержимого». Больше проработки?

— 03.08.2018 07:15

html css

03.08.2018 07:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 4

Удалить абсолютную позицию из контейнера .yes-no-buttons-container

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
   position: sticky;
  bottom: 0;
  width: 100%;
}

<div data-container = "" class = "page-container" style = "height: 92.5%;">
  <div id = "b3-b2-ContentPlaceholder" style = "background-color: #cecece;">
    <div style = "">
      <span data-expression = "" style = "">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container = "" class = "yes-no-buttons-container">
      <div>
        <div data-container = "" class = "">
          <button data-button = "" type = "button" style = "width: 49%;">
                            <span data-expression = "">Yes</span>
                        </button>
          <button data-button = "" type = "button" style = "width: 49%;">
                            <span data-expression = "">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

Мне нужно, чтобы 2 кнопки оставались внизу родительского элемента

— 03.08.2018 07:19

@Rendy Я обновил свой код

— 03.08.2018 07:23

Извините, я не могу использовать фиксированную позицию, потому что страница предназначена для мобильного приложения, боюсь, что у меня возникнут проблемы с совместимостью в более ранней версии ОС

— 03.08.2018 07:25

03.08.2018 07:19

Это сработает для вас:

Я изменил некоторые из ваших CSS как свою идею.

Я удалил стиль .yes-no-buttons-container для лучших результатов.

body {
  margin: 0;
  padding: 0
}

#b3-b2-ContentPlaceholder {
  display: inline-block;
  padding:20px;
}

#b3-b2-ContentPlaceholder>div>span{
  display:inline-block;
  height:60vh;
  overflow:auto;
}
.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


/*.yes-no-buttons-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}*/

.btn_wrap {
  padding-top: 10px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.btn_wrap [type = "button"] {
  float: left
}

<div data-container = "" class = "page-container">
  <div id = "b3-b2-ContentPlaceholder" style = "background-color: #cecece;">
    <div style = "">
      <span data-expression = "" style = "">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container = "" class = "yes-no-buttons-container">
      <div>
        <div data-container = "" class = "btn_wrap">
          <button data-button = "" type = "button" style = "width: 49%;">
                            <span data-expression = "">Yes</span>
                        </button>
          <button data-button = "" type = "button" style = "width: 49%; margin-left: 2%;">
                            <span data-expression = "">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

Надеюсь, это было полезно.

Извините, я не могу использовать гибкий и более новый компонент CSS, потому что страница предназначена для мобильного приложения, боюсь, у меня возникнут проблемы с совместимостью в более низкой версии ОС.

— 03.08.2018 07:25

@Rendy Я обновил свой код, проверьте его и посмотрите, поможет ли он вам.!

— 03.08.2018 07:31

03.08.2018 07:20

Что вы ищете, так это атрибут sticky для ваших кнопок YES и NO для позиций.

.yes-no-buttons-container {
  position: sticky;
}

MDN упоминает это как:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

Реализация этого в вашем коде:

.page-container {
  position: absolute;
  width: 94%;
  margin: 0px 3%;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yes-no-buttons-container {
  position: sticky;
  bottom: 0;
  width: 100%;
}

<div data-container = "" class = "page-container" style = "height: 92.5%;">
  <div id = "b3-b2-ContentPlaceholder" style = "background-color: #cecece;">
    <div style = "">
      <span data-expression = "" style = "">Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here</span>
    </div>
    <div data-container = "" class = "yes-no-buttons-container">
      <div>
        <div data-container = "" class = "">
          <button data-button = "" type = "button" style = "width: 49%;">
                            <span data-expression = "">Yes</span>
                        </button>
          <button data-button = "" type = "button" style = "width: 49%; margin-left: 1%;">
                            <span data-expression = "">No</span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

03.08.2018 07:30

Вы можете сделать это с помощью flex следующим образом

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* it can be anything */
  width: 480px; /* it can be anything */
  margin: 0 auto;
}

.content {
  display: flex;
  flex: 5;
  background-color: transparent;
  border-radius: 10px;
  overflow-y: scroll;
}

.actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.actions button {
  width: 40%;
  border-radius: 2px;
  color: #FFF;
  background-color: #0095ff;
  border-color: #07c;
  box-shadow: inset 0 1px 0 #66bfff;
  border: 0;
  margin: 0 4px;
  font-weight: 400;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = "container" >
    <div class = "content">
      Some super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text hereSome super long text here
    </div>
    <div class = "actions">
      <button>Yes</button>
      <button>No</button>
    </div>
  </div>
</body>
</html>

03.08.2018 07:47

Другие вопросы по теме

CSS - лучший способ выровнять изображение рядом с текстовым полем?

Избегайте мигания текста Aria в компоненте Vuetify Autocomplete

Поле с фиксированным соотношением сторон с буквой и столбиком между верхним и нижним колонтитулами

Скомпилированное приложение VueJS css не работает, если оно не скопировано и не вставлено обратно в редактор стилей браузера

Предупреждение Visual Studio: необъявленная примесь в файле .less

Вложение фона HTML: исправлено. После прокрутки фон закрывается

Изменить цвет раскрывающейся кнопки по умолчанию

Выделить несколько строк таблицы с помощью класса CSS

CSS: Как добавить несколько селекторов (один из них [атрибут * = значение]) с помощью: not

Настройте jQuery UI Spinner, чтобы отрегулировать ширину так, чтобы текст поместился в

Заполнить оставшуюся высоту Content Div

Ответы 4

Другие вопросы по теме

Похожие вопросы