How to achieve DIV of 3 rows, with top row being a fixed size of content, middle row being a scrollable div, and bottom row being a status bar

user_535965 0
Viewed 108

I currently have a HTML of 3 main DIV.

The top DIV (green colour) contains an image with text beside it. I'm centering this DIV within the page. This DIV has to contain both the image and the text.

The second DIV (blue colour) is scrollable, meant to be show some scrollable text.

The third DIV (grey colour) is kind of like a status bar, fixed at the bottom of the page.

Now, the problem I have is as the scrollable text increases in the second DIV, the last line in the second DIV cannot be seen, as it is obscured by the status bar at the bottom. The scrollable text currently contains multiple lines of "Hello world..." with the last line being "Hello world... last"

How do I change the CSS or the HTML, so that the last line in the second DIV will not be obscured by the status bar? If it helps, I can create move the content within the scrollable DIV into another DIV (so as to fix the second DIV) to be above the status bar.

The solution needs to work on all modern browsers.

I have a fiddle with the link below. You can see that "Hello world... last" line cannot be seen. What do I need to change, so that the last line can be seen, with the second DIV being scrollable?

Here's how it looks like currently.enter image description here

  <div class="container">
    <div class="first-row" style="display: inline-block; ">
        <div class="first-rowx" style="display: inline-block; vertical-align: middle;">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/acme-logo-png-transparent.png" width=240 height=274 alt="img" />
        </div>

        <div style="display:inline-block; vertical-align:middle;">
            <h1 class="text-center" style="display:inline-block; vertical-align:middle;">Proudly made by ACME</h1>
        </div>

      <hr />

      <div class="center1">
        <div class="center2" >
          <label id="SomeLabel1">Some label: </label>
          <label id="SomeLabel2">Some text....</label> <br/>
          <label id="SomeLabel3">Some text </label>
          <label id="SomeLabel4">Please do something xxxxx yyyyy</label> <br/>
        </div>
      </div>

      <hr />
        
      <div class="pet-filter" style="display: flex; justify-content: center;">
        <button class="btn btn-default btn-Connect" id="btnConnect">Button1</button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name1" style="visibility:hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name2" >Button3</button> &nbsp; &nbsp;
        <button class="btn btn-default" style="visibility: hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name3" disabled>Some action</button>    
      </div>
      <hr />
    </div>

    <div class = "middle-row" id="SomePanel"> <!-- second DIV -->
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world... last<br/> 
    </div>
     <div id="status">Not connected.</div> <!-- status bar div -->

  </div>

JSFiddle

css html jquery
3 Answers

You can give a margingBottom or paddingBottom to the 2nd Div, equal to the height of statusBar, so either itself or its content will always be above the status bar.

user_57808530

You can add some padding bottom on middle row.

padding-botton:30px;
user_128114020

Just add a margin-bottom with the height of the last fixed div to the second div.

#status {
    background: #aaa;
    border-top: solid 2px #888;
    padding-top: 10em;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    //display: none;
}

div.center1 {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  /* border: 1px solid red; */
  display: flex; 
  justify-content: center;
}

div.center2 {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  /*
  border: 1px solid red;
  display: flex;
  */ 
}

div.first-row {
  margin: 0 auto;
}

/* this needs to be scrollable if dynamic content is to large */
.middle-row {
  overflow-y: scroll;
  background: blue;
  flex:1;
  margin-bottom: 20px;
}     

.container {
  position: absolute;
  display:flex;
  flex-direction: column;
  left: 0;
  top: 0;
  width: 100%;
  background: green;
  max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Some title</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bluecross-new.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="first-row" style="display: inline-block; ">
        <div class="first-rowx" style="display: inline-block; vertical-align: middle;">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/acme-logo-png-transparent.png" width=240 height=274 alt="img" />
        </div>

        <div style="display:inline-block; vertical-align:middle;">
            <h1 class="text-center" style="display:inline-block; vertical-align:middle;">Proudly made by ACME</h1>
        </div>

      <hr />

      <div class="center1">
        <div class="center2" >
          <label id="SomeLabel1">Some label: </label>
          <label id="SomeLabel2">Some text....</label> <br/>
          <label id="SomeText">Some text </label>
          <label id="SomeText2">Please do something xxxxx yyyyy</label> <br/>
        </div>
      </div>

      <hr />
        
      <div class="pet-filter" style="display: flex; justify-content: center;">
        <button class="btn btn-default btn-Connect" id="btnConnect">Button1</button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name1" style="visibility:hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name2" >Button3</button> &nbsp; &nbsp;
        <button class="btn btn-default" style="visibility: hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name3" disabled>Some action</button>    
      </div>
      <hr />
    </div>

    <div class = "middle-row" id="SomePanel">
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world... last<br/> 
    </div>
     <div id="status">Not connected.</div>

  </div>
 
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/web3.min.js"></script>
  <script src="./js/truffle-contract.min.js"></script>
  <script src="./js/donation.js"></script>
</body>

</html>

user_87244040
Related