CODEWITHSUNDEEP
htmlcss
Denis
Denis

Reputation: 1271

Set height = "100% - relative top" for absolute positioned element

Here is a sample snippet:

.tabs {
  display: flex;
  position: relative;
}
.tab {
  height: 100px;
  background: lightgray;
}
.content {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: lightgreen;
}
.open .content {
  display: block;
}
.footer {
  height: 50px;
  background: lightblue;
}
<div class="tabs">
  <div class="tab">
    <div class="header">Tab 1</div>
    <div class="content">Content 1</div>
  </div>
  <div class="tab open">
    <div class="header">Tab 2</div>
    <div class="content">Content 2</div>
  </div>
</div>
<div class="footer">Footer</div>

The height of absolute positioned green content equals to the height of its relative positioned container. So it overlaps the footer. Is it possible to keep top position relative and to set bottom to 0? Something like:

.content {
  position: absolute;
  left: 0;
  width: 100%;
  top: relative; /* Not supported */
  bottom: 0;
  display: none;
  background: lightgreen;
}

I can set top explicitly, say, to 20px. Or I can calculate and set it using JavaScript. Is there a CSS only solution without pre-calculated top value?

Upvotes: 0

Views: 180

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Here is an idea using CSS grid to achieve what you want without position:absolute

.tabs {
  display: grid;
  grid-auto-flow:column; /* column flow */
}
.tab {
  display:contents; /* remove the tab div */
}
.header {
  background: lightgray;
}
.content {
  /* make all the content above each other*/
  grid-row:2;
  grid-column:1/span 20; /* use a big value here, at least equal to number of tab*/
  /**/
  height: 100px;
  display: none;
  background: lightgreen;
}
.open .content {
  display: block;
}
.footer {
  height: 50px;
  background: lightblue;
}
<div class="tabs">
  <div class="tab">
    <div class="header">Tab 1</div>
    <div class="content">Content 1</div>
  </div>
  <div class="tab open">
    <div class="header">Tab 2</div>
    <div class="content">Content 2</div>
  </div>
</div>
<div class="footer">Footer</div>

Upvotes: 1

Dev Enock
Dev Enock

Reputation: 136

You can apply a margin to the footer to separate it from the green content.

.footer{
    margin-top: 20px;
 }

Upvotes: 0

Related Questions