html - 带有扩展到按钮全高的容器的垂直按钮？

Question

我试图在 div 元素内制作一个垂直按钮，但我无法让 div 的高度填充剩余空间。我使用变换翻转按钮，并使用 Bulma 进行布局。这是我的代码大纲:

.column {
  border: 1px solid #ddd;
  margin-top: 50px;
  background: gray;
}

.button {
  width: auto;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />

<div class="columns">
  <div class="column">
    <a href="#" class="button">SHOW OPTIONS</a>
  </div>
</div>

不确定我可以在这里做什么来解决这个问题并让它响应？我知道我总是可以使用固定高度，但有什么方法可以改变它，让它随内容扩展吗？有人可以看一下吗，如果您有任何建议，请告诉我？我什至不必使用转换，这似乎是一个合乎逻辑的选择。

谢谢!

Answer 1

如果出于某种原因，您不能使用writing-mode 属性，这里有一个替代解决方案:

.column {
  border: 1px solid #ddd;
  margin-top: 50px;
  background: gray;
}

.button {
  width: auto;
}

.so55562898-outer {
  display: inline-block;
}

.so55562898-inner {
  transform: rotate(90deg);
  padding-top: calc(100% - 36px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />

<div class="columns">
  <div class="column">
    <div class="so55562898-outer">
        <div class="so55562898-inner">
          <a href="#" class="button">SHOW OPTIONS</a>
        </div>
    </div>
  </div>
</div>

Note that this solution requires to know the height of the button (in this case: 36px).