CSS 選項卡>Div 隱藏在 Container Div 后面

Question

我正在努力弄清楚導致“標簽式” div 被隱藏的原因。 我無法確定是內容還是容器 div 導致了這個問題。

如果您將“.tabs > div”position 從絕對更改為相對，則 div class="tabbed" 會按照我的意願出現，但它會導致選項卡堆棧的內容彼此重疊。

這是位置/z-index 還是溢出問題？

任何幫助，將不勝感激。

這是代碼：

 * { box-sizing: border-box; } body { background: #fff; color: #262626; font: 1em 'PT Sans', sans-serif; }::selection { background-color: #4EC6DE; } #content { padding: 5px 0 5px 0; position: relative; overflow: hidden; }.container { position: relative; clear: both; width: 100%; min-height: 350px; max-width: 1200px; padding: 5px 0px 5px 0px; overflow: hidden; background-color: #ffffff; }.pCV { font-family: 'Libre Baskerville', serif; font-size: 16px; line-height: 1.6; padding: 0; }.cvheader { font-family: 'Libre Baskerville', serif; font-size: 16px; font-weight: bold; } #textbox { width: 100%; border: 1px solid #ccc } /* Style buttons */ #downloadbtn { background-color: #ffffff; border: 2px solid #262626; color: #262626; padding: 12px 12px; cursor: pointer; font-size: 20px; float: right; margin-top: -50px; } /* Darker background on mouse-over */ #downloadbtn:hover { background-color: #888888; color: #ffffff; border: 2px solid #888; transition: all.8s ease-in-out; }.tabbed { width: 1000px; margin: 50px auto; }.tabbed>input { display: none; }.tabbed>label { display: block; float: left; padding: 12px 20px; margin-right: 10px; cursor: pointer; transition: background-color.3s; }.tabbed>label:hover, .tabbed>input:checked+label { background: #4EC6DE; }.tabs { clear: both; perspective: 600px; }.tabs>div { width: 1000px; position: absolute; border: 2px solid #4EC6DE; padding: 10px 30px 40px; line-height: 1.4em; opacity: 0; transform: rotateX(-20deg); transform-origin: top center; transition: opacity.3s, transform 1s; z-index: 0; } #tab-nav-1:checked~.tabs>div:nth-of-type(1), #tab-nav-2:checked~.tabs>div:nth-of-type(2) { transform: rotateX(0); opacity: 1; z-index: 1; } @media screen and (max-width: 700px) {.tabbed { width: 400px }.tabbed>label { display: none }.tabs>div { width: 400px; border: none; padding: 0; opacity: 1; position: relative; transform: none; margin-bottom: 60px; }.tabs>div h2 { border-bottom: 2px solid #4EC6DE; padding-bottom: .5em; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script> <div id="content"> <div class="container"> <div class="tabbed"> <input type="radio" name="tabs" id="tab-nav-1" checked> <label for="tab-nav-1">CV 1</label> <input type="radio" name="tabs" id="tab-nav-2"> <label for="tab-nav-2">CV 2</label> <div class="tabs"> <div> <div id="textbox"> <h2 class="cvheader">EDUCATION</h2> <a href="ArtistCV.pdf" download> <button id="downloadbtn"><i class="fa fa-download fa-fw"></i>&nbsp; Download</button></a> <div style="clear: both;"></div> </div> <p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p> </div> <div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div> </div> </div> </div> </div>

Answer 1

我正在努力弄清楚導致“標簽式” div 被隱藏的原因。

您的 HTML 標記有誤。 改變這個：

Download</button</a>

對此：

Download</button></a>

並將其添加到您的 CSS 中：

.container {
  min-height: 350px;
}

如果您不想手動設置 min-height，則需要使用 JS 動態計算。 很難想象用純 CSS 來做到這一點。

Answer 2

.container { 
min-height: 350px; 
}

這是顯示 div 內容的唯一方式嗎？ 我正在嘗試使 div 高度隨其內容而擴展，但我所做的一切似乎都沒有奏效。