javascript - 90度翻转垂直响应div

Question

我试图让内部 div 响应父 div，这样如果父 div 调整大小，内部 div 也会调整大小。我设法翻转了父 div 中的内容，但在尝试了一些东西之后，我无法获得足够的结果。

我想要完成的事情: - 内部 div 是父 div 的 100% 高度。
-内部div的高度响应父div的高度。
- 内部 div 翻转 90 度。
- 内部 div 粘在父 div 的左侧。

我的 jsfiddle: https://jsfiddle.net/4obd6ye3/

.ok{
  width:100px;
  height:500px;
  display:flex;
  flex-direction:column;
  border:1px solid black;
  position:relative;
  float:left;
}
.heh{
  float:left;
  position: absolute;
  top: 0px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  border:1px solid green;
/*   height:100%;
  width:100%; */
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

<div class="ok">
  <div class="heh">
  hey
 </div>
</div>

Answer 1

您需要 JavaScript 通过调整边界框的大小来保持 100% 的高度。我的示例使用 jQuery: CSS:

.ok{
  width:100px;
  height:500px;
  display:flex;
  flex-direction:column;
  border:1px solid black;
  position:relative;
  float:left;
}
.heh{
  float:left;
  position: absolute;
  bottom: 0px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  border:1px solid green;
/*   height:100%;
  width:100%; */
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

JS:

$(document).ready(function(){
    var h1 = $('.ok').height();
  $('.heh').width(h1);
})