Javascript Random Quote - Works, but why won't the button show up in THIS Div?

问题

I've finally got a "Random Quote" container with a functioning javascript/button.

Currently, it works in my main center section (oneSUB) but not in a different div. I'd like to be able to move this to a different grid space like "four" in my code. "four" is the bottom right smaller box below "oneSUB"

The problem is the button (btnQUOTE) doesn't show up in "four" It's possible it's just off the screen as I saw that in previous attempts at making a random quote button...but stuff was different. How/Why is the button missing in "four"?

"four" contains and stretches for contents like paragraphs and even when below it is expanded, the button never shows up floating elsewhere, so I wouldn't think it's outside the div, but the button has seemed to behave differently there....

HTML:

      <div class="container-QUOTE">
        <div class="quote-text">
          <h1 id="quote"> I could eat a horse.</h1>
          <p id="author"> - whoever said</p>
        </div>
        <button id="btnQUOTE">Click Here</button>
      </div>

CSS:

.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;
}

Thank you so much! Let me know if I can provide anything else largely basing code off this tutorial: https://www.youtube.com/watch?v=0poDnc5X7Zk&

JS Fiddle: https://jsfiddle.net/o2t1qya5/1/

回答1:

Ok, looks like its a CSS issue, here is the offending style declaration

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

That seems to have handled it.

来源：https://stackoverflow.com/questions/62825838/javascript-random-quote-works-but-why-wont-the-button-show-up-in-this-div

标签

javascript

button

css-grid