css - 容器中可调整大小的内容 div

Question

我尝试在 CSS 中实现以下内容。一个包含静态选项卡 div 和内容 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>