Fill Remaining Height of Content Div

Question

I am looking forward to do this in CSS:

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

Below is my code:

.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>

I am not able to create the content div to fill remaining height with span inside as content's sole child.

Is there any advise?

I cant get what you mean by "fill remaining height with span inside as content's sole child". More elaboration? — Mr. Brickowski, Aug 03 '18 at 05:15

Sakkeer A · Answer 1 · 2018-08-03T05:24:01.097

Remove position absolute from .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>

Sorry I can't use position sticky because the page is for mobile app, afraid will get compatibility issues on lower OS version — Rendy, Aug 03 '18 at 05:25

Jithin Raj P R · Answer 2 · 2018-08-03T05:26:33.813

This will work for you:

I have changed some of your CSS as er my idea.

I have removed the style of .yes-no-buttons-container for better results.

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>

Hope this was helpfull.

Sorry I can't use flex and newer CSS component because the page is for mobile app, afraid will get compatibility issues on lower OS version — Rendy, Aug 03 '18 at 05:25
@Rendy I have updated my code, please check it and see if it helps you.! — Jithin Raj P R, Aug 03 '18 at 05:31

score 0 · Answer 3 · answered Aug 03 '18 at 05:30

What you are looking for is sticky attribute for your YES and NO buttons for the positions.

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

MDN mentions it as :

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.

Implementing it in your code :

.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>

Sandip Nirmal · Answer 4 · 2018-08-03T06:51:08.957

You can do it using flex in following way

.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>

Fill Remaining Height of Content Div

4 Answers4