响应式固定位置侧div

Question

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

我有一个问题，虽然：在容器div我有2个其他div s时，左（A）一个具有CSS-旋转的文本（在span），右（B）一个有3个复选框input s和文字，每个文字都包含span。喜欢的东西：

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

编辑：

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

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

请注意，填充不需要改变和A div的宽度也没有变化（只有它的高度）。什么改变了总容器宽度，高度和B div的宽度和高度，以及复选框的字体大小。

/EDIT

我想做到的是具有容器的右侧拿出来看，滚动到视图中单击左侧的div时。用于滑动目的的jQuery位现在不会让我感到困扰，我只是想在得到响应位（大小，边距，字体大小）之前弄清楚它。

问题：旋转后的文本生病了，填充没有正确显示。我在这里错过了什么？

这是我迄今为止（以下代码片段）：

.outer-wrapper{ 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
    overflow: hidden; 
 
    position: fixed; 
 
\t background: transparent; 
 
} 
 

 
.container{ 
 
    position: fixed; 
 
    width: 25vw; 
 
    height: 40vh; 
 
    top: 30vh; 
 
    right: 0; 
 
    background: #222; 
 
    color: #FFF; 
 
    padding: 20px; 
 
} 
 

 
.left{ 
 
    width: 20%; 
 
    \t -webkit-transform: rotate(-90deg); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -ms-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t transform: rotate(-90deg); 
 
} 
 

 
.right{ 
 
    position: absolute; 
 
    width: 80%; 
 
    left: 20%; 
 
}

<div class="outer-wrapper"> 
 
    <div class="container"> 
 
    <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>

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

我不知道，你要定位您的“菜单”文本，但事情混淆你可能是transform-origin，这与旋转有关（等等）并且代表围绕旋转发生的固定点。默认是center，但你可能想旋转bottom right或类似的东西。

而不是绝对定位左或右，我建议你简单地让他们float: left，这将他们从左到右对齐，没有空格之间（因为有效率加起来100％，没有换行会发生）。

更新

显然，你希望有“菜单”的左半部分的正中央。 要做到这一点，最好在左侧有一个绝对定位的元素，它位于顶部50％，宽度为100％，居中文本为100％。然后，围绕其中心旋转90度。

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

.outer-wrapper{ 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
    overflow: hidden; 
 
    position: fixed; 
 
\t 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%; 
 
}

<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>

Answer 3

.outer-wrapper{ 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
    overflow: hidden; 
 
    position: fixed; 
 
\t 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; 
 
    \t -webkit-transform: rotate(-90deg); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -ms-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t transform: rotate(-90deg); 
 
} 
 

 
.right{ 
 
    position: absolute; 
 
    width: 80%; 
 
    left: 20%; 
 
}

<div class="outer-wrapper"> 
 
    <div class="container"> 
 
    <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>