強制下一個內容來以下可變高度DIV

我有一個CSS驅動的選項卡控件可以正常工作，每個頁面都有不同的高度。強制下一個內容來以下可變高度DIV

目前，下一個控件出現在選項卡控件旁邊，我需要它來定位以下它，考慮到我選擇的選項卡內容的高度可變。我也不需要修正頁面高度和使用滾動條的方法。

感謝任何幫助。

HTML：

<div> 
    <div class="tab-control"> 
     <ul id="navlist" class="tabs"> 
      <li> 
       <input type="radio" name="tabs" id="tab-1" checked="checked" /> 
       <label for="tab-1">First Tab</label> 
       <div class="tab-content"> 
        Content of Tab 1. 
       </div> 
      </li> 
      <li> 
       <input type="radio" name="tabs" id="tab-2" /> 
       <label for="tab-2">Second Tab</label> 
       <div class="tab-content"> 
        Line 1 - Tab 2.<br /> 
        Line 2 - Tab 2.<br /> 
        Line 3 - Tab 2.<br /> 
        Line 4 - Tab 2.<br /> 
        Line 5 - Tab 2.<br /> 
        Line 6 - Tab 2.<br /> 
        Line 7 - Tab 2.<br /> 
        Line 8 - Tab 2.<br /> 
       </div> 
      </li> 
      <li> 
       <input type="radio" name="tabs" id="tab-3" /> 
       <label for="tab-3">Third Tab</label> 
       <div class="tab-content"> 
        Content of Tab 3. 
       </div> 
      </li> 
     </ul> 
    </div> 

    <div> 
     This should come below the tab control. 
    </div> 
</div>

CSS：

.tab-control { 
    clear:both; 
    width:700px; 
    background-color:#0ff; 
} 

.tabs { 
    list-style-type:none; 
    padding:0; 
    margin:0; 
    position:relative; 
    width:100%; 
} 

.tabs li { 
    float: left; 
} 

.tabs li > input { 
    display: none; 
} 

.tabs li > label { 
    display: inline-block; 
    border: 1px solid #02606d; 
    padding: 10px 20px; 
    height:10px; 
    line-height:10px; 
    border-right-width:0px; 
    border-bottom-width:0px; 
    border-top-left-radius: 7px; 
    border-top-right-radius:7px; 
    cursor:pointer; 
} 

.tabs li:last-child > label { 
    border-right-width:1px; 
} 

.tabs .tab-content { 
    display: none; 
    position:absolute; 
    left:0; 
    padding:5px; 
    width:100%; 
    border: 1px solid #000; 
} 



.tabs li > input:checked + label { 
    background-color: #eee; 
} 

.tabs li > input:checked ~ .tab-content { 
    display: block; 
}

來源

2015-11-01 Hazim

你的js –

的可要幫你提供如何在我的情況下實現這一點？ – Hazim

您是否想並排製作選項卡控件？並且元素的內容將在標籤控件下面？點擊？ –

這是我對它的看法。我已經重組了html：input,label和.tab-content是彼此的兄弟姐妹。您還需要將相關的tab-id添加到包含內容的div的類中。

input { 
 
     display: none; 
 
    } 
 
    .tab-content { 
 
     display: none; 
 
     border: 1px solid black; 
 
    } 
 
    input:checked + label { 
 
     background: #ccc; /* We can target the activated tab label */ 
 
    } 
 
    /* display only the relevant tab-content */ 
 
    input[id=tab-1]:checked ~ div[class~=tab-1], 
 
    input[id=tab-2]:checked ~ div[class~=tab-2], 
 
    input[id=tab-3]:checked ~ div[class~=tab-3]{ 
 
     display: block; 
 
    }

<div class="tab-control"> 
 
     <input type="radio" name="tabs" id="tab-1" checked="checked" /> 
 
     <label for="tab-1">First Tab</label> 
 
     <input type="radio" name="tabs" id="tab-2" /> 
 
     <label for="tab-2">Second Tab</label> 
 
     <input type="radio" name="tabs" id="tab-3" /> 
 
     <label for="tab-3">Third Tab</label> 
 
     <div class="tab-content tab-1"> <!-- Note the tab-1 in the class --> 
 
      Content of Tab 1. 
 
     </div> 
 
     <div class="tab-content tab-2"> <!-- Note the tab-2 in the class --> 
 
      Line 1 - Tab 2.<br /> 
 
      Line 2 - Tab 2.<br /> 
 
      Line 3 - Tab 2.<br /> 
 
      Line 4 - Tab 2.<br /> 
 
      Line 5 - Tab 2.<br /> 
 
      Line 6 - Tab 2.<br /> 
 
      Line 7 - Tab 2.<br /> 
 
      Line 8 - Tab 2.<br /> 
 
     </div> 
 
     <div class="tab-content tab-3"> <!-- Note the tab-3 in the class --> 
 
      Content of Tab 3. 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     This should come below the tab control. 
 
    </div>

來源

2015-11-01 13:16:00 woestijnrog

完美woestijnrog ...這看起來非常接近我所需要的。謝謝 – Hazim

試試這個： HTML代碼：

<div class="below-Tab"> 
     This should come below the tab control. 
</div>

CSS代碼

.below-Tab{ 
     border:1px solid black; 
     position:absolute; 
     top:200px; 
     width:400px; 
    }

如果這與你的期望不兼容，請解釋一下究竟你需要的，謝謝:)

來源

2015-11-01 10:21:07

感謝Nasco的回覆。事實上，這個解決方案修復了高度，而選項卡控件是可變高度的。如果內容超過200像素的高度，則會影響下一個內容。 – Hazim

有一個選項，你可以讓你的標籤固定的高度，然後添加溢出：滾動（這將使你的標籤內容滾動能夠），並讓這個div保持這樣..這是一個選項，另一種選擇是做到這一點JS。 –

Nasco，第二種方法更合適，但是我們在這種情況下實施它嗎？ – Hazim

<head> 
    <style type="text/css"> 
     ul li{ 
      display:inline; //new change for horizontal tab 
     } 

     .tabs li > label { 
      display: inline-block; 
      border: 1px solid #02606d; 
      padding: 10px 20px; 
      height: 10px; 
      line-height: 10px; 
      border-right-width: 0px; 
      border-bottom-width: 0px; 
      border-top-left-radius: 7px; 
      border-top-right-radius: 7px; 
      cursor: pointer; 
     } 

     .tabs li:last-child > label { 
      border-right-width: 1px; 
     } 

     .tabs .tab-content { 
      display: none; 
      position: relative; /*changes - absolute -> relative*/ 
      left: 0; 
      padding: 5px; 
      width: 100%; 
      border: 1px solid #000; 
     } 
     .below { /* changes - new */ 
      display:normal; 
      position:relative; /* relative*/ 
      padding-top:20px; /* for some space above*/ 
     } 


     .tabs li > input:checked + label { 
      background-color: #eee; 
     } 

     .tabs li > input:checked ~ .tab-content { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <div class="tab-control"> 
      <ul id="navlist" class="tabs"> 
       <li > 
        <input type="radio" name="tabs" id="tab-1" checked="checked" /> 
        <label for="tab-1">First Tab</label> 
        <div class="tab-content"> 
         Content of Tab 1. 
        </div> 
       </li> 
       <li> 
        <input type="radio" name="tabs" id="tab-2" /> 
        <label for="tab-2">Second Tab</label> 
        <div class="tab-content" > 
         Line 1 - Tab 2.<br /> 
         Line 2 - Tab 2.<br /> 
         Line 3 - Tab 2.<br /> 
         Line 4 - Tab 2.<br /> 
         Line 5 - Tab 2.<br /> 
         Line 6 - Tab 2.<br /> 
         Line 7 - Tab 2.<br /> 
         Line 8 - Tab 2.<br /> 
        </div> 
       </li> 
       <li> 
        <input type="radio" name="tabs" id="tab-3"/> 
        <label for="tab-3">Third Tab</label> 
        <div class="tab-content"> 
         Content of Tab 3. 
        </div> 
       </li> 
      </ul> 
     </div> 
     <div class="below"> /* added a class .below */ 
      This should come below the tab control. 
     </div> 
    </div> 

</body>

請複製代碼，粘貼爲HTML文件和測試，如果它是你想要什麼。

在這裏，我給taqb內容位置作爲相對的，並在div中添加一個類，它必須顯示在下面。而div的位置也是相對的。

來源

2015-11-01 11:55:14

感謝Abdur Rahim，但這似乎是一個垂直標籤樣式。我需要一個水平的標籤按鈕，內容如下。 – Hazim

我已經添加了兩行代碼來顯示它們的橫向（顯示：內聯;）。不用謝。 –

強制下一個內容來以下可變高度DIV

回答

相關問題