影响内容的 Javascript 高度不仅仅是 div答案

【问题标题】：Javascript height to impact content not just div影响内容的 Javascript 高度不仅仅是 div
【发布时间】：2015-01-31 20:27:55
【问题描述】：

我正在处理网页上的表单。我想在面板上有一个按钮，当按下该按钮时会展开一个 div（在按钮下方）以使其可见，然后在再次按下按钮时再次不可见 - 一种更详细的弹出框。到目前为止，我得到了这个：

function blockappear() {
    var ourblock = document.getElementById("theblock");
    ourblock.style.transition = "all 2s";
    if (ourblock.style.height == "0px") {
        ourblock.style.height = "220px";
    } else {
        ourblock.style.height = "0px";
    } 
}

还有这个：

#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}

还有这个：

<p><button type="button" onclick="blockappear()">Try it</button></p>

<div id="theblock">
Some text

</div>

而且它似乎工作起来非常令人愉快（尽管它需要几个小时才能做到这一点）。问题是这样的。我希望 div 从 200px 更改为 0px 包括内容，而不仅仅是根据内容可以达到的程度。目前 div 缩小了，但内容“一些文本”仍然放在页面上。我尝试将 div 的显示属性更改为“块”和“表”，但仍然没有乐趣。我认为 div 的意义在于它用组标签封闭了内容，并且没有 div 内容就无法存在。如果 div 的高度为 0px，文本如何仍然显示？

顺便说一下，如果我只使用 display:none;在 div 上它可以工作（当然没有过渡）。我需要 div 的内容以某种方式响应 div 的高度 - 我怀疑正确使用 css。

我认为以前使用 jquery 已经涵盖了这一点，但是我现在已经开始使用 javascript，因为如果我重新开始使用一种全新的语言可能需要几个小时 :-)

感谢您的帮助...

【问题讨论】：

Javascript !== Java!
好的，谢谢 - 我意识到这一点，而且我认为我不会在任何地方说其他 - 那我是在错误的论坛上吗？我很小心地说我正在使用 javascript，并且我不想使用 Jquery - 我很可能把我的术语弄混了 - 请扩大你的答案 - 谢谢。顺便说一句，你对我的问题有答案吗？
在我编辑问题之前，它的标题最初是“Java”，而不是 Javascript。

标签： javascript css

【解决方案1】：

将overflow: hidden; 添加到您的div。这将隐藏不适合容器的内容。

【讨论】：

【解决方案2】：

你想在你的 div 上使用这个 CSS 属性：

overflow: hidden;

这将使#theblock 的任何内容大于#theblock 本身不可见。所以 - 如果#theblock 的高度为 0px - 它的所有内容都将被隐藏。

默认值是overflow: visible;，所以即使内容比包含元素本身大，仍然可以让所有人看到。仅此而已。

阅读更多：overflow CSS property (MDN)

【讨论】：

太棒了 - 非常感谢 - 我是一个快乐的人（因为我现在可以去做其他事情，不再盯着这个屏幕:-)))）