如何仅使用 css 获取元素的高度

Posted 2023-03-05

【中文标题】如何仅使用 css 获取元素的高度

【英文标题】：How can I get the height of an element using css only

【发布时间】：2017-10-24 12:45:24

【问题描述】：

我们有很多选项可以使用 jQuery 和 javascript 获取元素的高度。

但是我们怎样才能只使用 CSS 来获得高度呢？

假设，我有一个动态内容的 div - 所以它没有固定的高度：

.dynamic-height 
   color: #000;
   font-size: 12px;
   height: auto;
   text-align: left;

<div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

我想仅使用 CSS 将 .dynamic-height 的 margin-top 设置为等于 (the height of the div - 10px) 的值。

如果我得到高度，我可以使用 CSS calc() 函数。

我该怎么做？

【问题讨论】：

我不认为只有css可以做到这一点

我可能是错的，但 SASS、LESS 或类似的东西对此没有帮助吗？

这句话可能过于简单，但padding: 5px 0; box-sizing: border-box; 不能帮助您实现同样的目标吗？

【参考方案1】：

不幸的是，无法通过 CSS“获取” 元素的高度，因为 CSS 不是一种返回任何类型数据的语言，除了规则用于浏览器调整其样式。

你的分辨率可以用 jQuery 来实现，或者你可以用 CSS3 的transform:translateY(); 规则来伪造它。

---

CSS 路线

如果我们假设您在此实例中的目标 div 高 200 像素 - 这意味着您希望 div 的边距为 190 像素？

这可以通过使用以下 CSS 来实现：

.dynamic-height 
    -webkit-transform: translateY(100%); //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    transform: translateY(100%);         //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
    margin-top: -10px;

在这种情况下，重要的是要记住translateY(100%) 会将有问题的元素向下移动它自己的总长度。

这条路线的问题是它不会将其下方的元素推开，而margin会。

---

jQuery 路由

如果伪造它对你不起作用，那么你的下一个最佳选择是实现一个 jQuery 脚本来为你添加正确的 CSS。

jQuery(document).ready(function($) //wait for the document to load
    $('.dynamic-height').each(function() //loop through each element with the .dynamic-height class
        $(this).css(
            'margin-top' : $(this).outerHeight() - 10 + 'px' //adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit "px" for valid CSS
        );
    );
);

【讨论】：

不错的答案。我使用了outerHeight() 方法，它对我有用。谢谢！

@TomaszDzięcielewski 不客气！我很高兴它有帮助！

【参考方案2】：

您可以使用 CSS calc 参数来动态计算高度，如下所示：

.dynamic-height 
   color: #000;
   font-size: 12px;
   margin-top: calc(100% - 10px);
   text-align: left;

<div class='dynamic-height'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>

【讨论】：

如果您不知道另一个 div 的大小（在您的情况下为 10px）将是多少，这将如何工作？例如在 textareas 等中。

它根本不适用于完全动态的场景，因为其他人认为 CSS 不是一种返回值的语言。

【参考方案3】：

最简单和最快的解决方案是在您的 chrome 开发者控制台中尝试 vanilla(plain) Javascript 来计算任何元素的高度或宽度，只需将任何元素的 'id' 放入其中并进行计算：

var clientHeight = document.getElementById('exampleElement').clientHeight;
alert(clientHeight);

var offsetHeight = document.getElementById('exampleElement').offsetHeight;
alert(offsetHeight)

【参考方案4】：

没有办法使用 css。 但是，

我们可以使用单行 JavaScript 来实现它。

求div的高度

document.getElementById("div-id").clientHeight

求div的宽度

document.getElementById("div-id").clientWidth

【参考方案5】：

如果你想向下移动div，这很简单。让我们用.box 类定义一个div，并定义一个高度为150px，这样如果你运行sn-p，你就会看到元素。

现在让我们将.box 转换为 flexbox，如下所示：

.box 
    display: flex;
    flex-flow: row;
    ...

最后，让我们将带有.dynamic-height 类的div 移动到带有align-self: end 的容器底部，如下所示：

.dynamic-height 
    align-self: end;
    ...

我还将.dynamic-height 类的颜色更改为绿色，以便我们查看align-self: end 的效果。

.box 
  display: flex;
  flex-flow: row;
  height: 150px;


.dynamic-height 
  align-self: end;
  color: #000;
  font-size: 12px;
  background: green;

<div class='box'>
  <div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.
    sem.
  </div>
</div>