html - 如何使用始终可见的侧边栏正确布局正文？

Question

如果我有一个 Semantic UI Sidebar它总是可见的(即设置了 visible 类)，我如何正确布局相应的 pusher 以便它考虑侧边栏的宽度。长(或右对齐)元素似乎被切断，如本例所示:

<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>

请注意左对齐标题如何按预期移动到左侧(即考虑了侧边栏的宽度)但是第二行，即右对齐标题，被截断了——就好像布局没有一样不考虑推杆宽度的减小。

Answer 1

显然这是一个错误或功能请求，请参阅相关票证:[Sidebar] Allow Sidebar to Start Visible #649和 [Sidebar] Allow Always Visible #807 .

作为临时解决方案，我猜你可以这样做:

.pusher {
  width: calc(100% - 260px); /*260px is the sidebar width*/
}

.pusher {
  width: calc(100% - 260px);
}

<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>