-1

I have 2 elements in my div container.

The first element has an fixed height, example: 

element1 {height: 40px;}

What I want to do is to fill the rest of the 100% minus the height of the first element by the second element that is: 

element2 {height: 100% - 40px;}

How can I achieve this with only CSS ?

Manoj Choudhari
  • 5,277
  • 2
  • 26
  • 37
Nickce
  • 9
  • 1
  • when writing your question you need to consider the related questions you get on the right. The second question is the one you needed. – Temani Afif Feb 10 '19 at 20:19

1 Answers1

3

You're looking for calc(): height: calc(100vh - 40px).

If the element with height: 40px needs to be variable, you should use:

.parent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
}

.parent>* {
  flex-grow: 0;
  border: 1px solid red;
}
.growing {
  flex-grow: 1;
}

body {
  margin: 0;
}
@media (max-width: 700px) {
  .not-growing{
    min-height: 100px;
  }
}
<div class="parent">
  <div class="not-growing"> not growing</div>
  <div class="growing"> growing</div>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • Yes, thank you for you answer. But now, the height of the element1 is changing, it is increased, when I pass to small screen. So that, I need to change 40px to a variable. Is it possible ? – Nickce Feb 10 '19 at 20:36
  • Yes, there are several ways to do it. Your best bet is to use `display:flex; flex-direction:column` on the parent, `flex-grow: 0` on the element that doesn't need to grow and `flex-grow: 1` on the element that fills the rest of the screen. But that's not the question you asked. – tao Feb 10 '19 at 20:45
  • @Nickce, I added an example to the answer. – tao Feb 10 '19 at 20:52