如何找出div的实际高度？

Question

我有一个div，我将宽度和高度设置为固定值，因为我只想在其内容溢出其大小时添加垂直滚动。

这就是我所做的：

Site.html

<div id = "foo" class = "verticalScrollIfNeeded">
  Foo bar har zar dar mar gar har par yar lar nar
</div>

的site.css

.verticalScrollIfNeeded
{
    overflow-wrap: break-word;
    overflow-y: auto;
}

#foo
{
    max-width: 180px;
    max-height: 200px;
}

然而，无论我投入多少内容，它都会不断增长。此外，它的实际宽度和高度远远大于我在CSS中设置的最大宽度和最大高度。

我的问题是：

1. 如果只有当内容超出其大小时，如何使用垂直滚动来获得固定的高度和宽度？

和

1. 如何使用当今大多数现代浏览器中的开发人员工具在某个时间点获取div的实际宽度和高度。我大部分时间都在使用Firefox 43.0.4。

更新： 以下是它已经应用于自身的所有CSS规则，无论是直接还是以继承的形式：

element {
}
#foo {
    max-width: 180px;
    max-height: 200px;
}
.verticalScrollIfNeeded {
    overflow-y: auto;
}
.hasContentToItsRight {
    margin-right: 4px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: Lato,sans-serif;
    font-size: 14px;
    line-height: 1.6em;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
}
html {
    font-size: 62.5%;
}
html {
    font-family: sans-serif;
}

最终更新和解决

真的很抱歉浪费你所有的时间。这是我的错。虽然在这个示例中，我使用了div，其代码为foo，但在我的代码中，我有一个span我正在应用所有这些。我对一些控件有一些微弱的回忆，其中一个是控件，不遵循box规则或其他一些控件。无论如何，总而言之，我把我的范围变成了div，整个世界都落到了适当的位置。

Answer 1

  

如何使其具有垂直的固定高度和宽度   仅在内容超出其大小时滚动？

使用overflow: auto和max-height。您的代码已经有效。

.verticalScrollIfNeeded {
  overflow-wrap: break-word;
  overflow-y: auto;
}
#foo {
  max-width: 180px;
  max-height: 200px;
}

<div id="foo" class="verticalScrollIfNeeded">
  Foo<br />bar<br />har<br />zar<br />dar<br />mar<br />gar<br />har<br />par<br />yar<br />lar<br />nar
</div>

  

如何在某个时间点获取div的实际宽度和高度   今天在大多数现代浏览器中使用开发者工具。我在用   Firefox 43.0.4大部分时间都在使用。

1. 打开开发人员工具
2. 转到“检查器”标签
3. 选择所需的元素
4. 转到Box Model子面板

您将看到尺寸，填充，边框和边距。

Answer 2

好的，我找到了罪魁祸首。

我在控制台中查找了与CSS相关的错误，其中有十几个错误是这样的：

Unknown property 'overflow-wrap'.  Declaration dropped.

我想我现在知道该怎么做。