rel1x
Reputation: 2441
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.
Upvotes: 1
Views: 1491
Answers (2)
Johannes
Reputation: 67778
If you fix the height of .AccountInfo (in my example 150px), you can use height: calc( 100% - 150px) for .DebitsAndCredits, which adds up to a height of 100%.
However, you need to add two more things: margin: 0 and height: 100% for html and body, AND margin-top: 0 for your first ptag.
That last one is rather tricky: .AccountInfo doesn't have any margin-top, but it gets the default top-margin from that first p element (due to the phenomenon of "collapsing margins"). If you set that to 0, the whole thing works...
html,
body {
margin: 0;
height: 100%;
}
.AccountInfo {
height: 150px;
}
.DebitsAndCredits {
height: calc(100% - 150px);
overflow-y: auto;
}
.AccountInfo p:first-of-type {
margin-top: 0;
}<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>Upvotes: 0
Asons
Reputation: 87241
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>Upvotes: 2
Related Questions
- How do I divide blocks in my page with flexbox?
- CSS side by side both same height with flexbox
- How to fit 2 elements to page height?
- Dividing the viewport height over two divs with an adjustable border
- How separate 2 flex blocks with HTML and CSS?
- How to make two divs the same height
- 2 Elements fill remaining height
- Two divs dynamically fill viewport height
- Make two flex items each 50% height of parent
- How to configure css flexbox so height of one of the block depends on it content?