Javascript Random Quote-Works，但是为什么这个按钮不会出现在这个Div中呢？

我终于得到了一个带有javascript/按钮的随机报价容器

目前，它在我的主要中心部分oneSUB中工作，但不在其他分区中。我希望能够将其移动到不同的网格空间，如我的代码中的四个网格空间。四是oneSUB下方右下角较小的框

问题是按钮btnNote没有在四个屏幕中显示，它可能只是从屏幕上消失了，正如我在以前尝试创建一个随机报价按钮时所看到的那样……但情况有所不同。为什么四个按钮都不见了

“四”包含并延伸段落等内容，即使下面的按钮被展开，它也不会在其他地方浮动，因此我不会认为它在div之外，但按钮在那里的行为似乎有所不同

HTML:

非常感谢你！如果我还能提供什么，请告诉我 主要基于本教程的代码：

---

JS Fiddle:

好的，看起来这是一个CSS问题，下面是令人不快的样式声明

.wrapper article div {
  /* height: 100%; <-- Removed this */ 
  border-radius: 12px;
}

---

这似乎已经解决了问题。

目前，页面上只能有一个这样的按钮，因为事件由document.getElementByIdbtnQUOTE装载，它将只选择具有该ID的第一个按钮。。。使用类并附加到每个类可以解决此问题。谢谢！起初仍然没有，但我将该div高度转换为特定的div，但没有多大用处。关于删除.wrapper article div中的高度，您是对的，尽管我最初认为在所有这些div中都需要它，但目前还没有，而且我还从容器引号和引号文本中删除了高度/宽度。尽管如此，javascript还是不起作用。由于four有一个重复的javascript部分，它是它的第二个实例，所以我删除了第一个，然后砰的一声！它可以容纳四个，javascript可以运行！我对javascript非常陌生，但在多次运行时，它的工作原理并不相同！谢谢你，雷克斯福德凯利！我相信现在已经很清楚了——没有看到你的第二条评论。我真的很感激在帮助的基础上进行的跟进和解释：np:-坚持下去，继续使用StackOverflow，继续学习。。。我们都在那里，当你觉得合适的时候，StackOverflow有一个代码审查部分，多年来我发现这是非常宝贵的。

.oneSUB {
  background-color: rgba(255, 255, 255, .7);
  font-family: 'Roboto', sans-serif;
  grid-area: one;
  word-wrap: break-word;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  margin: 0px;
  max-width: 100%;
}


.four {
  background-color: rgba(255, 255, 255, .7);
  grid-area: four;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

#btnQUOTE {
  margin-top: 30px;
  font-size: 25px;
  padding: 10px 20px;
  background-color: #191716;
  color: #F15025;
  text-transform: uppercase;
}


.container-QUOTE {
  background-color: #fff;
  width: 180vw;
  max-width: 100%;
  max-height: 100%;
  padding: 40px;
  height: 55vh;
  border-left: 3px solid #f15025;
}

.wrapper article div {
  /* height: 100%; <-- Removed this */ 
  border-radius: 12px;
}