Question

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

我想要完成的事情： -Inner div是父div的100％高度 -Inner div的高度响应父div的高度 - 内部div翻转90度 -Inner 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);
})

90度翻转垂直响应div

1 个答案: