Html 如何使表格单元格的宽度与其高度相同？

我有一组像这样的

div

s：

<div id="container">
    <div id="tabs">
        <div class="row"><div class="tab">....</div></div>
        ...
    </div>
</div>

这将在我的区域左侧垂直创建一组高度相同的元素。问题是，我希望

.tab

是方形的。由于选项卡的大小是动态调整的，以适应垂直空间，因此我无法定义宽度。如何使宽度与高度匹配？理想情况下，这应该在没有JavaScript和纯css/html的情况下完成

这是一份按要求提供的文件。

看到了吗

我使用了一个简单的JS，如下所示

<script>
    var th = $('.tab').height();
    $('.row').css({'width':th+'px'});
</script>

var th=$（'.tab'）.height（）；
$（'.row'）.css（{'width'：th+'px'}）；

---

请注意，此

应该加载到document.ready中，只有在主体加载后才可以。如果可以从顶部取消48px位置，则可以使用此解决方案：

body {
  margin: 0;
}

#container {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.row {
  padding-bottom: 14.28571429%;
  position: relative;
  width: 14.28571429%;
}

.tab {
  bottom: 0;
  font-size: 20px;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

解释

---

它利用了填充绑定到它所附加到的元素的宽度这一事实。您可以使用可用屏幕高度的1/7将外部元素

.row

设置为正方形。通过将外部元素和内部

选项卡上的
位置设置为
位置：绝对
，您还可以使用巧妙的技巧，将
边距：自动
，以及
顶部
，
右侧
，
底部
和
左侧
设置为
0
。您需要为此图元指定一个高度，以使其正常工作。因此，
字体大小和相应的
高度
，假设您只需要将一行文本居中。通过调整高度，您可以微调字体基线偏移可能导致的偏离位置。
我已经修改了这个想法，以下是我的想法，值得一提。正如在前面的评论中所写的，我不相信有一个CSS唯一的解决方案。然而，所需的JS是最小的

HTML
JS
如果您想玩它，我已经创建了一个代码笔：

更新：我已经编辑了代码笔来自动计算行的高度，而不是通过CSS进行设置。
如果你能与我们共享一个小提琴，那会很有帮助。@Lal只是我问题的复制粘贴，但我用小提琴更新了我的问题。看看这个：。@garryp谢谢你的链接，我在我的应用程序的其他地方使用了类似的方法。不幸的是，
display:table cell
似乎阻止了这种方法的工作。如果正方形的大小相对于视口大小是固定的，则可以使用CSS3单位
vh
和
vw
。否则，您可以尝试。这不符合我的问题中的任何条件。
显示：表格行
用于完成表格功能。我希望
.tab
s的高度相等，并填充父对象的整个高度。这是您需要的吗？它包括
display:table row
Yes，它完成了我所寻找的内容，尽管这是一个我已经知道的解决方案。正如我在问题中所说的，如果可能的话，我宁愿使用css/html方法。因为它不满足问题中的要求，我不打算投票。你的意思是你正在研究另一个答案吗？或者这个答案是使用css？当使用提供的css时，元素的高度随宽度缩放，因此更宽的分辨率显示屏幕顶部的第一个选项卡，而薄分辨率将所有选项卡显示在视口底部的50%。你是对的。我很快就把它组装起来了，但没有进行适当的测试。再仔细考虑一下，我相信您将无法避免使用JavaScript来完成此任务，因为您希望两个维度都能自动调整，以适应您缩放浏览器窗口的任何方式。我已经成功地使用CSS实现了我想要的功能，但有一些问题（至少在chrome上）会导致它出现错误和不可预测。不幸的是，我认为你是对的。如果你觉得我的回答对你有帮助，你可以。
body {
  margin: 0;
}

#container {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.row {
  padding-bottom: 14.28571429%;
  position: relative;
  width: 14.28571429%;
}

.tab {
  bottom: 0;
  font-size: 20px;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

<div id="container">
  <div id="tabs">
    <div class="row">
      <div class="tab"><span>1</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>2</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>3</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>4</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>5</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>6</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>7</span></div>
    </div>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
}
#tabs {
  width: 100%;
  height: 100%;
}
.row {
  position: relative;
  height: 14.28571429%;
}
.tab {
  display: block;
  position: relative;
  background-color: #008000;
}
.tab span {
  position: absolute;
  height: 20px;
  font-size: 20px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

var adjustHeight = function() {

  var rowHeight = $('.row').height();
  $('.tab').each(function(){
    $(this).height(rowHeight);
    $(this).width(rowHeight);
  });

}

adjustHeight();

$(window).on("resize", function() {
  adjustHeight();
});