javascript - 问题更新 css 转换的 div 的高度(FlexBox，Sass)

标签 javascript jquery html css flexbox

我有一个 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)，我认为相关的类都使用注释突出显示，但也许我遗漏了来自其他地方的内容:

@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 将 skills-content 类的元素循环到 skills-bar 类的相应元素。关于此的一些背景:似乎转换后的 div 的高度是在转换之前计算的，所以我在 this 中解决它。方式，使用 jquery。

直觉上，我试图使用无序列表的计算高度来设置转换后的 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 只是为了突出我将在下一点中描述的奇怪行为。

enter image description here enter image description here

我不知道这是否有帮助，但是当我反直觉地将宽度属性设置为计算的 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
  });
});

enter image description here enter image description here

更新

从下面测试简化的 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;
  }
}

最佳答案

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

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

了解渲染顺序可能有助于您排除故障，但我在代码片段中包含了一个更简单的 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>

关于javascript - 问题更新 css 转换的 div 的高度(FlexBox，Sass)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51450433/

上一篇：html - 有什么方法可以为我的所有 HTML 页面使用模板文件吗？

下一篇：javascript - 在 HTML 中链接 JavaScript 对象

相关文章：

javascript - 无法从动态加载的脚本中读取 DOM 属性

html - 关于 Html 电子邮件通讯的 css 编码标准的困惑

html - css 向下滚动的背景

javascript - 防止Pubnub key 被查看

javascript - 使用 JavaScript 将字符串附加到头部并执行

JavaScript Regex - 从字符串中获取第 N 位数字

jquery - 检查元素时仅在 bx slider 中加载图像，在 Bootstrap 模式中添加 bx slider ，这是 css 问题吗？

jquery - jquery 1.3.2 中的 index() 替代方案

php - 如果数组发生变化，如何发送警报？

javascript - 带有 babel ES2015 的 Angular 2 未加载且没有错误

©2024 IT工具网  联系我们