Css 文本div右侧的滚动条不可见。我正在创建一个布局，就像所附的图像一样

我正在尝试创建上面的布局。我没有将滚动条移到内容的右侧

另外，建议是否有比我目前的方法更好的替代方法

我的html代码是

<div class="header"></div>
<div class="content">
    <div class="content-left">Menu</div>
    <div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>

---

请更正类的宽度。内容右侧{宽度：61%；}。因为您已经给出了100%的宽度，所以您无法看到溢出滚动条

这是因为您为

.content right

指定了一个100%的

宽度

，但菜单列已经占据了200px，因此将滚动条推下

试试这个：

.content-right {
    width:calc(100% -200px);
}

或者，您可以按照@King的建议，完全删除

width

属性

---

下面是一个显示正在运行的修复程序的示例

您只需删除

宽度：100%

的

。内容右侧

：

更新：

因为您对

.content right

使用绝对位置G，我们只需为其设置

left

和

right

，即可使

宽度

动态：

.content-right{
  position:absolute;
  top:0;
  /* add this */
  right:0; 
  left:200px;    
  height:100%;    
  overflow:auto;
  background-color:blanchedalmond;
}

---

这是因为您的

位置：固定了
.content
和
.content right
的
属性。那么，请问有什么可能的替代方案..我仍然可以为.content left保留200px的宽度吗？是的，您可以，但是righside width是totalwidth-leftside width；这两种解决方案都很有魅力。谢谢TimmahAnd还有一个疑问，这是我正在使用的最佳方法还是有更好的解决方法？最简单的方法是完全删除
width
属性，下一步是像@Annsh所说的那样更改宽度值，最后
width:calc（）
方法有效地做同样的事情，但在旧浏览器中存在浏览器支持率低的风险。这两种解决方案都非常有效。谢谢国王，如果我去掉宽度：100%；当然。内容正确，当我没有任何内容时，我看不到任何背景颜色被应用div@user2768369因为您使用绝对定位，所以很容易实现您想要的，请参阅此更新的演示。达到了预期的效果。非常感谢你。
.content-right{
  position:absolute;
  top:0;
  /* add this */
  right:0; 
  left:200px;    
  height:100%;    
  overflow:auto;
  background-color:blanchedalmond;
}