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

如果我有一个始终可见的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>

请注意，左对齐页眉如何按预期方式向左移动（即，考虑了边栏的宽度），但是第二行，即右对齐页眉被截断了-好像布局没有采用减少了推杆的宽度。

最佳答案

显然，这是一个错误或功能请求，请参阅相关票证：[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>

关于html - 如何使用始终可见的侧边栏正确布置 body ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34445329/