容器中可調整大小的內容div

Question

我嘗試在CSS中實現以下內容。 包含靜態選項卡div和內容div的容器，當頁面變小時，該容器會變小。 選項卡div應該保持在同一個位置。

澄清什麼圖片。

我現在代碼：

.tabs { 
padding-left: 30px; 
padding-right: 30px; 
width: 100% 
} 

.tabss { 
clear: none; 
width: 300px; 
float: left; 
} 

.tabss-content { 
position: relative; 
left: 30%; 
} 

我將不勝感激，如果有人可以幫助我。

Answer 1

這是你在找什麼？

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 10px; 
 
} 
 
.tabs { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    background-color: blue; 
 
} 
 
.content { 
 
    padding: 10px 10px 10px 150px; 
 
    background-color: green; 
 
}

<div class="tabs"> 
 
    <ul> 
 
    <li>tab one</li> 
 
    <li>tab two</li> 
 
    <li>tab three</li> 
 
    </ul> 
 
</div> 
 

 
<div class="content"> 
 
    <p>content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    </p> 
 
</div>