rel1x rel1x - 2 days ago 3
CSS Question

Divide the height of page for two blocks using CSS

I have two blocks: header

.AccountInfo
and content
.DebitsAndCredits
. They both should divide the height of a page and
.DebitsAndCredits
should be scrollable. Scroll control should be visible just inside of
.DebitsAndCredits
block and I try to do that but I have no idea how to do that without JS but I think this is possible using just CSS.

I published my example here: http://jsbin.com/peqetoseyi/1/edit?html,css,output (I am sorry, HTML is not clean here, I just copied the compiled HTML of my react app)

There is my problem:

.DebitsAndCredits {
padding-top: 20px;
padding-bottom: 20px;
overflow: scroll;
height: 300px;
}


I should do it whithout
height: 300px;
. The height of this block should be from the bottom of
.AccountInfo
to the bottom of the page.

Answer

You can use Flexbox and do this (see notes in CSS)

body {
  margin: 0;
  font-family: sans-serif;
}

.App {
  display: flex;                 /*  added  */
  flex-direction: column;        /*  added - stacked vertical  */
  height: 100vh;                 /*  added - full height */
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.DebitsAndCredits {
  flex: 1 0;                     /*  added - keep half height  */
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: auto;
}
.DebitsAndCreditsItem {
  padding: 20px;
}
.DebitsAndCreditsItem-name {
  font-size: large;
}

.AccountInfo {
  flex: 1 0;                     /*  added - keep half height  */
  overflow: hidden;              /*  hide if content exceed element  */
  padding: 20px;
  border-bottom: 1px solid;
}
.AccountInfo-name {
  font-size: large;
}

.text-muted {
  color: #636c72;
}
.text-success {
  color: #5cb85c;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>
    <div data-reactroot="" class="App">
        <div class="AccountInfo">
            <p class="AccountInfo-name">Joe Doe</p>
            <p>
                <!-- react-text: 5 -->IBAN:
                <!-- /react-text -->
                <!-- react-text: 13 -->HTB0001234567
                <!-- /react-text --><br>
                <!-- react-text: 7 -->Balance:
                <!-- /react-text -->
                <!-- react-text: 14 -->3133.56
                <!-- /react-text --><br>
                <!-- react-text: 9 -->Currency:
                <!-- /react-text -->
                <!-- react-text: 10 -->EURO
                <!-- /react-text --><br></p>
        </div>
        <div class="DebitsAndCredits">
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 17 -->Wendy
                    <!-- /react-text -->
                    <!-- react-text: 18 -->,
                    <!-- /react-text -->
                    <!-- react-text: 19 -->
                    <!-- /react-text --><span class="text-success">+10.5</span></div><span class="text-muted">Diner</span><br><span class="text-muted">10 January 2016, 12:20 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 27 -->Danny
                    <!-- /react-text -->
                    <!-- react-text: 28 -->,
                    <!-- /react-text -->
                    <!-- react-text: 29 -->
                    <!-- /react-text --><span class="text-success">+10.5</span></div><span class="text-muted">Diner</span><br><span class="text-muted">10 January 2016, 12:14 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 37 -->Joe's Pizza
                    <!-- /react-text -->
                    <!-- react-text: 38 -->,
                    <!-- /react-text -->
                    <!-- react-text: 39 -->
                    <!-- /react-text --><span class="">-31.5</span></div><span class="text-muted">134678943.88</span><br><span class="text-muted">10 January 2016, 1:23 am</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 47 -->Northwind Industries
                    <!-- /react-text -->
                    <!-- react-text: 48 -->,
                    <!-- /react-text -->
                    <!-- react-text: 49 -->
                    <!-- /react-text --><span class="text-success">+2310.7</span></div><span class="text-muted">Salary January</span><br><span class="text-muted">9 January 2016, 7:00 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 57 -->Coffee and Cakes
                    <!-- /react-text -->
                    <!-- react-text: 58 -->,
                    <!-- /react-text -->
                    <!-- react-text: 59 -->
                    <!-- /react-text --><span class="">-2.5</span></div><span class="text-muted">468832.99</span><br><span class="text-muted">8 January 2016, 11:14 am</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 67 -->Albert Heijn
                    <!-- /react-text -->
                    <!-- react-text: 68 -->,
                    <!-- /react-text -->
                    <!-- react-text: 69 -->
                    <!-- /react-text --><span class="">-76.65</span></div><span class="text-muted">489923982.45</span><br><span class="text-muted">7 January 2016, 10:30 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 77 -->Shoes and Jackets
                    <!-- /react-text -->
                    <!-- react-text: 78 -->,
                    <!-- /react-text -->
                    <!-- react-text: 79 -->
                    <!-- /react-text --><span class="">-89</span></div><span class="text-muted">567222.67</span><br><span class="text-muted">7 January 2016, 9:29 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 87 -->NS Railways
                    <!-- /react-text -->
                    <!-- react-text: 88 -->,
                    <!-- /react-text -->
                    <!-- react-text: 89 -->
                    <!-- /react-text --><span class="">-12.2</span></div><span class="text-muted">89357483.76</span><br><span class="text-muted">7 January 2016, 1:45 pm</span><br></div>
        </div>
    </div>
</body>

</html>