问题是我正在创建标签我在一个div中有所有标签内容，我已经给了position:relative以及我给它们position:absolute的所有内容div。
因此当position为absolute时，内容与footer重叠。
我知道我可以将min-height提供给亲戚div，但我正在寻找合适的代码。让代码像这样。我没有添加footer，因为它是php。
我希望相对div高度与内容量的高度一样多。
.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>
答案 0 :(得分：2)
一方面，这可能会让人觉得有点hacky，但它实际上没有任何Javascript或复杂的计算，所以我想我还是会发布它。
代码段中的结果可能看起来有点奇怪，因为我已经将标签设置为半透明，因此您可以看到它们（不要）互动并且彼此叠加。< / p>
技巧：将所有元素放在彼此之上而不使用绝对位置，因此父级仍将自动增长到包含。 为此，我做了以下步骤：
white-space: nowrap）。由于这也会影响标签内的文字，我在那里white-space: normal重置了它。0大小的字体以消除空白问题。这也可以通过从HTML代码中的制表符div之间删除任何空格来解决。我确实在每个标签中添加<p>，以保持所有标签的行为相同，并阻止评论，例如＆＃34; Ey！标签2开始更高！＆＃34;
实际要求CSS相当小。我已经使用评论将其拆分，因此您可以轻松删除其他部分。
是的，我故意保留了rel和abs这两个名字，因为要重构这些名称太多了，并证明描述性更好关于目的（tab-container，tab-sheet）的名称，而不是使用指示特定实现细节的名称。 ; - ）
/* 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!