将jQuery垂直选项卡内容区域扩展到整个页面宽度

Question

我按照概述here设置了一组垂直标签。但是，内容区域仅延伸到整个页面的中间位置。

我一直在尝试调整CSS以允许它通过向各种UI CSS标记添加width='100%'属性或播放内置的宽度属性值来流向页面的最边缘，并且它确实扩展了窗口，但它开始将实际内容放在错误的位置。

例如，如果从width: 55em移除.ui-tabs-vertical，则白色容器区域会完全延伸，但“hello”文本会显示在以下位置：

如何调整CSS以允许内容区域填满页面宽度，但仍然从垂直选项卡列表的精确填充左侧开始？

JsFiddle example

Answer 1

如果设置宽度可能会修复它，请尝试执行以下操作：

width: calc(100% - 162px);

162px是我假设左侧边栏的宽度。

Answer 2

从

更改.ui-tabs-vertical .ui-tabs-panel规则

.ui-tabs-vertical .ui-tabs-panel 
{ 
  padding: 1em; 
  float: right; 
  width: 40em;
}

浮动：左

.ui-tabs-vertical .ui-tabs-panel 
{ 
  padding: 1em; 
  float: left; 
  width: 40em;
}

似乎按预期工作。