響應式固定位置側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>