I am creating custom tabs but tabs content overlapping the footer

Question

The thing is that I am creating tabs I have all the tabs content in one div to which I have given position:relative and to all the content div I have given them position:absolute.

So when the position is absolute, the content is overlapping the footer.

I know I can give min-height to the relative div but I am looking for proper code. Have the code something like this. I have not added the footer because it php.

I want the relative div height as much as the inner content's height.

.rel{min-height:300px; height:auto; background:red; width:100%; position:relative;  }

.abs{position:absolute; top:0; left:0; height:100%; width:100%; background:#eee; }

<div class="rel">
    <div class="abs"> </div>
    <div class="abs">4</div>
    <div class="abs">3</div>
    <div class="abs">2</div>
    <div class="abs">
        <p>
            When it comes to web design services, we are a top rated player with stunning capabilities that will immensely benefit every business. As we are a well experienced and highly skilled web design company, a lot of businesses bank on us for their affordable web design requirements. We provide a number of affordable web design packages and low cost web designing quotes for any of your requirements and preferences. Therefore a lot of businesses find it very convenient to work with us to avail of some profitable custom website design packages. Hence a huge customer base considers us the top web design company for small businesses.

            WordPress is a highly popular platform for different kinds of web development projects. This open source platform provides a host of benefits to the designers and businesses. As a WordPress website development company we provide our clients with the complete suite of WordPress website development services. We are a top rated player among the long list of best WordPress companies in India. Our services are strongly backed by a team of accomplished and highly talented WordPress web designers. Call us to know the WordPress website design prices we offer. Take advantage of our unique capabilities on the WordPress platform and further your dreams of getting a stunning website.

            We also have a strong presence in the Ecommerce Web Design Services segment. We are highly known for our unique capabilities to design responsive websites that can perform well on any user interface. We deliver highly creative design in every website design project we undertake for our clients. Along with web designing and ecommerce website design services, we also specialize in several other services that will benefit our customers in many ways. Our stunning capabilities in the field of business catalyst hosting have made us the number one Adobe Business Catalyst expert. 
        </p>
    </div>
</div>

Answer 1

On one hand this may feel a bit hacky, but it actually does the trick without any Javascript or complicated calculations, so I thought I'd post it anyway.

The result in the snippet may look a bit weird, because I've made the tabs semi-opaque, so you could see how they (don't) interact and lay on top of each other.

The trick: Position all elements on top of each other without using position absolute, so the parent will still automatically grow to contain then. To achieve this, I did the following steps:

• Display all the tabs as inline-block, so they basically become a line of text.
• Indicate that that line cannot wrap (by setting white-space: nowrap on the parent). Since this also affect the text inside the tabs, I had white-space: normal there to reset it.
• Give each block a right margin of -100%, making them behave as if they are zero-width regarding the positioning of the next block. That is, the next block will start at the same left position.
• Some details, like setting the 0 sized font on the parent to remove white space issues. This can also be solved by removing any white space from between the tab divs in the HTML code.

I did add <p> in every tab, to keep the behavior for all of them the same and prevent comments like "Ey! Tab 2 starts higher!"

The actual requires CSS is fairly small. I've split it using comments, so you can easily remove the other parts.

And yes, I've deliberately kept the names rel and abs, because it was too much work to refactor them, and to prove that it's better to have descriptive names about the purpose (tab-container, tab-sheet) than to use names that indicate a specific implementation detail. ;-)

/* To make the basic alignment work */
.rel{
  white-space: nowrap;
}

.abs{
  vertical-align: top;
  white-space: normal;
  display: inline-block;
  width:100%; 
  margin-right: -100%;
}

/* To solve the white-space issue, which would cause shifting of the tabs. 
  Can also be solved by removing white-space in HTML, in which case this 
  CSS is not needed. */
.rel{
  font-size: 0;
}

.abs{
  font-size: 1rem;
}

/* Additional styling, just for demo purposes */
.rel {
  box-sizing: border-box;
  border: 1px solid red;
}

.abs {
  opacity: 0.5;  
  background: #eee; 
  
  box-sizing: border-box;
  border: 1px solid blue;
}

.abs:nth-child(1) { color: red; }
.abs:nth-child(2) { color: grey; }
.abs:nth-child(4) { color: green; }
.abs:nth-child(5) { color: blue; font-weight: bold; }

<div class="rel">
    <div class="abs intro"><p>First tab, all the way at the bottom and mostly invisible</p></div>
    <div class="abs"><p>2</p></div>
    <div class="abs"><p>3</p></div>
    <div class="abs about-us">
        <p>
            When it comes to web design services, we are a top rated player with stunning capabilities that will immensely benefit every business. As we are a well experienced and highly skilled web design company, a lot of businesses bank on us for their affordable web design requirements. We provide a number of affordable web design packages and low cost web designing quotes for any of your requirements and preferences. Therefore a lot of businesses find it very convenient to work with us to avail of some profitable custom website design packages. Hence a huge customer base considers us the top web design company for small businesses.

            WordPress is a highly popular platform for different kinds of web development projects. This open source platform provides a host of benefits to the designers and businesses. As a WordPress website development company we provide our clients with the complete suite of WordPress website development services. We are a top rated player among the long list of best WordPress companies in India. Our services are strongly backed by a team of accomplished and highly talented WordPress web designers. Call us to know the WordPress website design prices we offer. Take advantage of our unique capabilities on the WordPress platform and further your dreams of getting a stunning website.

            We also have a strong presence in the Ecommerce Web Design Services segment. We are highly known for our unique capabilities to design responsive websites that can perform well on any user interface. We deliver highly creative design in every website design project we undertake for our clients. Along with web designing and ecommerce website design services, we also specialize in several other services that will benefit our customers in many ways. Our stunning capabilities in the field of business catalyst hosting have made us the number one Adobe Business Catalyst expert. 
        </p>
    </div>
    <div class="abs"><p>This is the last paragraph, which is actually on top..<p></div>
</div>
The proof is in the footer!