更新 css-transformed div 高度的问题（FlexBox、Sass）

Question

我有一个 div，其文本已通过 css 转换。现在，我正在尝试根据相邻列的高度来设置高度（沿单词的轴）。

div 已经通过 css 以这种方式进行了转换：

.skills-bar {
  transform: rotate(90deg);
  transform-origin: left top 0;
  p {
    font-family: Bitter, Georgia, sans-serif;
    font-size: .85em;
    color: black;
  }
}

html 标记：

   <div class="container__row">
      <div class="container__col-sm-12 container__col-md-8 container__col-md-8">
        <ul class="skills-content">
          <li>
            <div class="list-title">Python</div>
          </li>
          <li>
            <div class="list-title">Java</div>
          </li>
          <li>
            <div class="list-title">C</div>
          </li>
          <li>
            <div class="list-title">Prolog</div>
          </li>
        </ul>
      </div>
      <div class="container__col-sm-12 container__col-md-4 container__col-md-4 skills-bar">
        <p>Programming</p>
      </div>
    </div>

所有其他 css 类（使用 sass），我认为相关的那些都使用 cmets 突出显示，但也许我错过了来自其他地方的东西：

@import "compass/reset";
@import "compass/css3";

body {
  text-align: center;
  font: 1em/1.5 Georgia, serif;
  color: #333;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: Bitter, Georgia, serif;
  font-size: 2.25em;
  padding: 0 1em;
}

h2 {
  font-family: Bitter, Georgia, serif;
  font-size: 1.5em;
  padding: 0 1em;
}

li {
  margin: 10px 5px 15px 10px;
}

* {
  box-sizing: border-box;
}

//RELEVANT to html markup in post
//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query  for each breakpoint
@mixin create-mq($breakpoint) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (min-width: $breakpoint *1px) {
      @content;
    }
  }
}
@mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
  @include create-mq($breakpoint) {
    //class to set up columns for all screen sizes - mobile first
    @for $i from 1 through $grid__cols {
      &__col#{$modifier}-#{$i} {
        flex-basis: (100 / ($grid__cols / $i)) * 1%;
      }
    }
  }
}

.container {
  max-width: $grid__bp-md * 1px;
  margin: 0 auto;
  //attribute to override max width
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  //attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
  &__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  @each $modifier, $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

//header
.header {
  padding: 10em 0 14em;

  h1 {
    font-style: italic;
  }
}

.footer {
  p {
    color: #777;
    padding: 0 1em;
  }
}

.header,
.footer {
  background: #f7f7f7;
}

.content,
.footer {
  padding: 4em 0 6em;
}

.content {
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;

  h1 {
    color: #ea4c89;
  }

  p {
    font-size: .85em;
    color: #aaa;
  }
}

.avatar {
  @include box-shadow(0 0 0px 3px #fff, 0 0 0 4px #ccc, 0 4px 6px #333);
  @include border-radius(50px);
  width: 100px;
  height: 100px;
}

.list-date {
  font-family: Bitter, Georgia, sans-serif;
  font-size: .85em;
  color: grey;
}

.list-title {
  font-family: Bitter, Georgia, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: black;
}

.list-company {
  font-family: Bitter, Georgia, sans-serif;
  font-size: .85em;
  color: black;
}

.list-align-left {
  text-align: left;
  margin: 20px 0 64px 0;
}
//RELEVANT to html markup in post
.skills-bar {
  transform: rotate(90deg);
  transform-origin: left top 0;
  p {
    font-family: Bitter, Georgia, sans-serif;
    font-size: .85em;
    color: black;
  }
}

.fit-to-content {
  display: inline;
  flex-basis: auto;
}

#prog-bar {
  background-color: #A9A9A9;
  border-right: 15px solid  #B8B8B8;
  width: 20em;
}

#front-bar {
  background-color: #C0C0C0;
  border-right: 15px solid #D0D0D0;
  width: 20em;
}

#design-bar {
  background-color: #D8D8D8;
  border-right: 15px solid #E0E0E0;
  width: 20em;
}

#gis-bar {
  background-color:     #F0F0F0;
  border-right: 15px solid #F8F8F8;
  width: 20em;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: grey;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.text-container {
  position: relative;
  width: 50%;
  padding:5px 5px 5px 5px;
}

/* The circles on the timeline */
.text-container::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  right: -5px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
  text-align: right;
}

/* Place the container to the right */
.right {
  left: 50%;
  text-align: left;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -5px;
}
/* The actual content */
.timeline-content {
  padding: 0px 10px 0px 10px;
  margin: 0px 10px 0px 10px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

// Shared styles
.icon-facebook:before,
.icon-twitter:before,
.icon-instagram:before,
.icon-google-plus:before,
.icon-youtube:before,
.icon-dribbble:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?ebzao9');
  src:  url('../fonts/icomoon.eot?ebzao9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?ebzao9') format('truetype'),
    url('../fonts/icomoon.woff?ebzao9') format('woff'),
    url('../fonts/icomoon.svg?ebzao9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Shared styles
.icon-facebook:before,
.icon-twitter:before,
.icon-instagram:before,
.icon-google-plus:before,
.icon-youtube:before,
.icon-dribbble:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

//Individual styles
.icon-email:before {
  content: "\ea84";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-linkedin:before {
  content: "\eac9";
}

.social {
  margin:2em 0;
  font-family: Noto, sans-serif;

  li {
    position: relative;
    @include inline-block();
    margin: .5em;
    @include transition(all .15s ease);
    border-radius: 6px;

    &:hover {
      @include scale(1.25);
      color: white;
    }

    &:before {
      position: absolute;
      width: 2em;
      margin-left: -1em;
      top: 1.5em;
      left: 50%;
    }

    a {
      display: block;
      color: inherit;
      padding: 2.5em 1em 1em;
      width: 6em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

/* Twitter */
.icon-twitter {color: #00a0d1}
.icon-twitter:hover {background:#00a0d1;
box-radius:6px;}
/* Instagram */
.icon-instagram {color: #634d40}
.icon-instagram:hover {background: #634d40}
/* Facebook */
.icon-skype {color: #00aff0}
.icon-skype:hover {background: #00aff0}
/* Twitter */
.icon-linkedin {color: #0077B5}
.icon-linkedin:hover {background: #0077B5}
/* Twitter */
.icon-email {color: #c71610}
.icon-email:hover {background: #c71610}

最后，jquery 将技能内容类的元素循环到技能栏类的相应元素。这方面的一些背景：似乎转换后的 div 的高度是在转换之前计算的，所以我正在使用 jquery 以this 的方式解决它。

直观地说，我正在尝试使用计算出的无序列表的高度来设置转换后的 div 的高度属性。但是，我注意到一些奇怪的行为——转换后的 div 的高度似乎产生了宽度而不是高度。我尝试更新宽度属性（未在下面的代码中显示），但这并没有解决我的问题：

$(document).ready(function(){
  var skillsContent = $(".skills-content");
  var skills = $(".skills-bar");
  $.each(skills, function(j, titlediv) {
      console.log(titlediv);
      console.log(skillsContent[j]);
      var dimensions = skillsContent[j].getBoundingClientRect();
      console.log(dimensions);
      $(this).css("height", dimensions.height+"px"); //this line is where I attempted to modify the width instead, but it still isn't working
  });
});

使用 chrome 开发工具，这是我在识别 ul 元素（要测量）和 div 元素（要调整）时得到的。 *注意，测量 ul 元素是任意的，因为真正的问题是动态设置属性的方式（我认为）。仅供参考，我最终想要获得容器 div 的高度——在这种情况下，我测量了 ul 只是为了突出我将在下一点中描述的奇怪行为。

我不知道这是否有帮助，但是当我反直觉地将 width 属性设置为计算出的 ul 高度时，会发生这种情况（新值似乎与 ul 的父 div 高度相对应，出于某种原因我目前看不到）：

$(document).ready(function(){
  var skillsContent = $(".skills-content");
  var skills = $(".skills-bar");
  $.each(skills, function(j, titlediv) {
      console.log(titlediv);
      console.log(skillsContent[j]);
      var dimensions = skillsContent[j].getBoundingClientRect();
      console.log(dimensions);
      $(this).css("width", dimensions.height+"px"); //this line is where I attempted to modify the width instead, but it still isn't working. Setting max-height doesn't change anything either
  });
});

更新

从下面测试简化的 jquery 代码，我添加了一些打印语句，因为我仍然不确定为什么我无法设置转换后的 div 的“宽度”（视觉上的高度）。

$(document).ready(function() {
  $('.skills-bar').each( function() {
    console.log("got here");
    $(this).css( 'width', $(this).parent().innerHeight() + 'px' );
    console.log($(this).parent().innerHeight());
    console.log($(this).width());
  });
});

打印语句仍然令人费解：

got here
graphic_rendering.js:16 166
graphic_rendering.js:17 124
graphic_rendering.js:14 got here
graphic_rendering.js:16 205
graphic_rendering.js:17 124
graphic_rendering.js:14 got here
graphic_rendering.js:16 166
graphic_rendering.js:17 124
graphic_rendering.js:14 got here
graphic_rendering.js:16 49
graphic_rendering.js:17 124

我注意到的是 div 的“宽度”（视觉高度）随着测量的 div 宽度的增加而增加。

更新css：

.skills-bar {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  //position: relative;
  text-align: center;
  overflow:hidden;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width:100%;
  p {
    font-family: Bitter, Georgia, sans-serif;
    font-size: .85em;
    color: black;
  }
}

Answer 1

元素的定位首先根据未变换的尺寸进行渲染，然后进行包括旋转和平移的变换，所以屏幕上的变换后“高度”实际上是宽度。即使基于 javascript 修改 css 也是如此。

顶部、左侧、右侧或底部位置规则中的百分比是父容器的百分比，但变换转换规则中的百分比是元素本身的百分比。

了解渲染顺序可能有助于您排除故障，但我在 sn-p 中包含了一个更简单的 jQuery 循环和 3 个示例，其中包含您可以复制的样式。一种无内边距，一种采用父内边距，另一种采用内部容器外的父内边距。

$('.skills-bar').each( function() {
  $( this).css( 'width', $( this ).parent().innerHeight() + 'px' );
});

.container {
  position: relative;
}

.skills-content {
  background: blue;
  margin: 0;
}

.skills-content li {
  height: 50px;
  line-height: 50px;
}

.skills-bar {
  position: absolute;
  background: red;
  text-align: center;
  transform-origin: top left;
  transform: rotate( -90deg ) translateY( -100% );
  top: 100%;
  left: 100%;
}

.container:nth-of-type(2) {
  padding: 2em;
  background: yellow;
}

.container:nth-of-type(3) {
  padding: 2em;
  background: green;
}

.inner-container {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul class="skills-content">
    <li>
      <div class="list-title">Python</div>
    </li>
    <li>
      <div class="list-title">Java</div>
    </li>
    <li>
      <div class="list-title">C</div>
    </li>
    <li>
      <div class="list-title">Prolog</div>
    </li>
  </ul>
  <div class="skills-bar">
    <p>Programming</p>
  </div>
</div>

<div class="container">
  <ul class="skills-content">
    <li>
      <div class="list-title">Python</div>
    </li>
    <li>
      <div class="list-title">Java</div>
    </li>
    <li>
      <div class="list-title">C</div>
    </li>
    <li>
      <div class="list-title">Prolog</div>
    </li>
  </ul>
  <div class="skills-bar">
    <p>Programming</p>
  </div>
</div>

<div class="container">
  <div class="inner-container">
    <ul class="skills-content">
      <li>
        <div class="list-title">Python</div>
      </li>
      <li>
        <div class="list-title">Java</div>
      </li>
      <li>
        <div class="list-title">C</div>
      </li>
      <li>
        <div class="list-title">Prolog</div>
      </li>
    </ul>
    <div class="skills-bar">
      <p>Programming</p>
    </div>
  </div>
  </div>