CODEWITHSUNDEEP
htmlcss
Rishikesh Dehariya
Rishikesh Dehariya

Reputation: 99

Get a full height div from where it starts according to the window

This question is more project specific. I have two <div> in my template which looks like this.

Two Divs

I want that last div to acquire full height respective to window from its vertical position. For example,

Two Divs

If I add another div, it should look like this.

Three Divs

Right now in this example, I am setting height explicitly just for demonstration purpose.

How can I make the last div calculate height according to its vertical position and all content should be visible inside the window.

Upvotes: 1

Views: 73

Answers (2)

Tugrul Yildirim
Tugrul Yildirim

Reputation: 231

.container {
  display: block;
  position: fixed;
  top: 0; /* where you want to start; */
  bottom: 0; /* (the end) */
  left: 0;
  /* you can use width 100% or code right:0; */
}
<div class="container">
  somethin
</div>

Upvotes: 0

d-h-e
d-h-e

Reputation: 2548

You can use flexbox for this. The flow is column so the div's are vertically aligned. The last div get a flex:1 to expand.

flex:1 or flex:1 1 0% is a short writing for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

For your last div the flex-grow and the flex-basis is important.

See flex property

body {
  height: 100vh;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.container>div {
  background: #ccc;
  border-top: 3px solid white;
}

.container>div:last-child {
  flex: 1;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Upvotes: 1

Related Questions