考慮一個帶有選項卡和選項卡內(nèi)容的模式。第一個選項卡的內(nèi)容高度為 100 像素，第二個選項卡的內(nèi)容高度為 500 像素，第三個選項卡的內(nèi)容高度為 50 像素。目標(biāo)是讓模態(tài)框主體始終為最高選項卡的高度 (500px)，因此當(dāng)您在選項卡之間切換時，模態(tài)框的大小保持不變。這不能通過以下方式實現(xiàn)：將選項卡內(nèi)容區(qū)域包裝器設(shè)置為position: relative并將每個選項卡設(shè)置為position: absolute; top: 0; left: 0;因為絕對定位的元素不占用空間。默認情況下，將所有選項卡設(shè)置為不可見，但活動選項卡除外。這會導(dǎo)致選項卡垂直堆疊，因此選項卡 2 上方將有 100 像素的空間，選項卡 3 上方將有 600 像素的空間（模態(tài)框主體的總高度將是所有選項卡的高度之和）。請參閱下面鏈接的示例。在“最終目標(biāo)”和“實際”之間切換以查看視覺差異以及我想要實現(xiàn)的目標(biāo)。我真的不想使用 JS 來檢查每個選項卡的高度（需要每隔一段時間進行一次，因為選項卡可以根據(jù)當(dāng)前選擇等更改高度）。所以這將是一個非常hacky的解決方案。不確定是否有更好的方法?，F(xiàn)在，我將為選項卡容器選擇一個“合適”的高度，并允許更高的選項卡在需要時滾動。示例：https: //codepen.io/joshm123/pen/NWrEVjJ（復(fù)制如下）超文本標(biāo)記語言<div class="modal"> <div class="header"> <h2>Welcome!</h2> </div> <div class="body"> <div class="tabs"> <button class="tab" onClick="selectTab(1)">Tab 1</button> <button class="tab" onClick="selectTab(2)">Tab 2</button> <button class="tab" onClick="selectTab(3)">Tab 3</button> </div> <div class="tabs-wrapper"> <div id="tab1" class="tab-content active"> blah blah blah<br/> blah blah blah </div> <div id="tab2" class="tab-content"> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah<br/> blah blah blah </div> <div id="tab3" class="tab-content"> blah blah blah </div> </div> </div> <div class="footer"> <button id="showEndGoalButton" onClick="toggleView()">Show End Goal</button> <button id="showActualButton" onClick="toggleView()">Show Actual</button> </div></div>CSS.modal { position: absolute; width: 500px; left: calc(50% - 250px); top: 30px; border: 1px solid #999;}.header { padding: 10px; border-bottom: 1px solid #999;}.header h2 { margin: 0; padding: 0;}.body { padding: 10px;}.tabs > .tab { margin-right; 10px;}.tabs-wrapper { margin: 10px 0; border: 1px dotted red;}
強迫孩子們占據(jù)相同的空間但從 0, 0 開始？
慕運維8079593
2023-07-29 13:53:55
