保持侧边栏固定79％，但仍然没有空白区域

Question

我想保持一个旋转的固定侧边栏从左侧精确到79％但是当我添加white-space: nowrap;时它会弄乱该位置。也许更容易让侧边栏与中间div保持一个px的距离？

https://jsfiddle.net/cs6bya2g/embedded/result/

#sidebar-miniright {
position: fixed;
top: 50%;
left:79%;
width:25%;
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}

.sidebar-right {
width:auto;
}

^这就是我想要的。但是，当我调整浏览器大小时，它变得像下面的图片。当我添加white-space: nowrap;时，会导致left: 79%;变得不稳定。

Answer 1

您的侧边栏元素侧面，旋转，这意味着width: 25%会使侧边栏'的高度为窗口宽度的25％ 的

解决方案是删除width: 25%规则。将transform属性更新为：

-webkit-transform: rotate(-270deg) translateX(-50%);
-moz-transform: rotate(-270deg) translateX(-50%);
-ms-transform: rotate(-270deg) translateX(-50%);
-o-transform: rotate(-270deg) translateX(-50%);
transform: rotate(-270deg) translateX(-50%);

这会使侧边栏文本垂直居中。您可以使用translateX值来获得所需的结果。