A problem with with div size and overflowing text at bottom

1

Hey all, in creating the Random Quote Generator, I have created a div that expands to hold the text. The problem I’m having is if the text pulled is lengthy, it starts to overflow the div at the bottom. It also causes the page to split at the bottom.

I have tried using css overflow, but I do not want to add a scroll bar to page.

I have also tried a couple other css properties such as display, height, or resizing the font (which works, but makes the font a little too small).

The page is not complete as I still need to delay the text appearing so that the container grows first.

Thanks for any help with this!

2

because fixed height, that’s why

/* remove these css and also the js-generated height */
.container-fluid {
  height: 100vh;
}
.quoteHolder {
  height: 50vh;
  max-height: 90vh;
}
#name {
  margin-bottom:20%;
}

/* add css */
.container-fluid {
  min-height: 100vh;
}
1 Like
3

This worked perfectly! Thanks for your assistance!

In other words my problem was not having the container holding everything be 100% of the view port so everything scales to fit as such.