Question

我试图（通过自己，学习目的）制作一个滑动的，固定位置的侧面菜单div。我想让它响应不同的视口尺寸。

我遇到了问题：在容器中div我有另外两个div s，左边（A）一个有css旋转的文本（在{{1}中}}），右边（B）一个有3个复选框span和文本，每个都由input包裹。类似的东西：

span

修改

例如，如果视口增长，它应该更像是：

container (w/ padding)
+----------------------+
| +---+   +----------+ |
| | A |   |     B    | |
| +---+   +----------+ |
+----------------------+

请注意，填充不需要改变，并且A div的宽度也不会改变（只有它的高度）。改变的是容器总宽度，高度和B div的宽度和高度，以及复选框＆＃39;字号。

/修改

我想要完成的是让容器的右侧不在视图中，在单击左侧div时滚动到视图中。用于滑动目的的jQuery位现在并不麻烦我，我只是想在我进入滑动之前找到响应位（大小，边距，字体大小）。

问题：旋转的文字位置不正确，并且未正确显示填充。我在这里缺少什么？

这是我到目前为止（下面的代码段）：

＆＃13;

container (w/ padding)
+---------------------------+
| +---+   +---------------+ |
| |   |   |               | |
| |   |   |               | |
| |   |   |               | |
| | A |   |       B       | |
| |   |   |               | |
| |   |   |               | |
| |   |   |               | |
| |   |   |               | |
| +---+   +---------------+ |
+---------------------------+

＆＃13;

.outer-wrapper{
	height: 100vh;
	width: 100vw;
    overflow: hidden;
    position: fixed;
	background: transparent;
}

.container{
  position: fixed;
  width: 25vw;
  height: 40vh;
  top: 30vh;
  right: 0;
  background: #222;
  color: #FFF;
  padding: 20px;
}

.left{
  width: 20%;
  	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	transform: rotate(-90deg);
}

.right{
  position: absolute;
  width: 80%;
  left: 20%;
}

＆＃13;

Answer 1

我已经添加了一个内部包装div，但是如果没有它就可以进行很少的调整。

菜单容器未旋转，但内容范围为，但绝对位于该菜单内。

边界仅供参考。

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.outer-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  background: transparent;
}
.container {
  position: fixed;
  width: 25vw;
  top: 10vh; /* changed for snippet demo only */
  right: 0;
  background: #222;
  color: #FFF;
}
.inner-wrapper {
  height: 80vh; /* increased for snippet demo only */
  padding: 20px;
}
.left {
  width: 20%;
  height: 100%;
  float: left;
  border: 1px solid red;
  text-align: center;
  position: relative;
}
.left span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.right {
  height: 100%;
  width: 80%;
  float: right;
  border: 1px solid green;
}

<div class="outer-wrapper">
  <div class="container">
    <div class="inner-wrapper">
      <div class="left">
        <span>Menu</span>
      </div>
      <div class="right">
        <span><input type="checkbox" checked autocomplete="off"> Checkbox1</span>
        <br>
        <span><input type="checkbox" checked autocomplete="off"> Checkbox2</span>
        <br>
        <span><input type="checkbox" checked autocomplete="off"> Checkbox3</span>
      </div>
    </div>
  </div>
</div>

Answer 2

我不确定你想要在哪里定位你的菜单＆＃34;文本，但令你困惑的事情可能是transform-origin，它与旋转相关（以及其他）并代表旋转发生的固定点。默认值为center，但您可能希望围绕bottom right或类似的内容轮换。

我建议你只需要左右对齐，我建议你只需要它们float: left，它们将从左到右对齐它们之间没有空格（因为withs加起来为100％，所以不会发生换行）。

<强>更新

显然，你想拥有＆＃34;菜单＆＃34;以左侧部分为中心。要做到这一点，最好在左侧有一个绝对定位的元素，它位于距离顶部50％，具有100％宽度和居中文本。然后，围绕其中心旋转90度。

请注意，我还将容器的填充更改为边框，以防止在绝对和相对定位的元素之间导致不同测量的问题。如果这是一个问题，您可以随时切换到另一个容器的解决方案，并为外部容器提供填充。

＆＃13;

.outer-wrapper{
	height: 100vh;
	width: 100vw;
    overflow: hidden;
    position: fixed;
	background: transparent;
}

.container{
  position: fixed;
  width: 40vw;
  height: 40vh;
  top: 30vh;
  right: 0;
  background: #222;
  color: #FFF;
  padding: 0;
  border: 20px solid #222;
}

.left{
    float: left;
    width: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.left .text {
    position: absolute;
    top: 50%;
    margin-top: -0.6em; /* ~ half a line-height */
    left: 0;
    right: 0;
    text-align: center;
    transform: rotate(-90deg);
    transform-origin: center;
}

.right{
  float: left;
  width: 80%;
  margin-left: 20%;
}

＆＃13;

<div class="outer-wrapper">
  <div class="container">
    <div class="left">
      <div class="text">Menu</div>
    </div>
    <div class="right">
      <span><input type="checkbox" checked autocomplete="off"> Checkbox1</span><br>
      <span><input type="checkbox" checked autocomplete="off"> Checkbox2</span><br>
      <span><input type="checkbox" checked autocomplete="off"> Checkbox3</span>
    </div>
  </div>
</div>

＆＃13;

Answer 3

user

.outer-wrapper{
	height: 100vh;
	width: 100vw;
    overflow: hidden;
    position: fixed;
	background: transparent;
}

.container{
  position: fixed;
  width: 25vw;
  height: 40vh;
  top: 30vh;
  right: 0;
  background: #222;
  color: #FFF;
  padding: 20px;
}

.left{
 position:absolute;
 top:7%;
 left:-20%;
 background:red;
 height:10vh;
 padding:6px;
  	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	transform: rotate(-90deg);
}

.right{
  position: absolute;
  width: 80%;
  left: 20%;
}

响应固定位置侧div

3 个答案: