I need help trying to add color to div when there is no content yet in it. Javascript adds the conte-CodePudding

I am trying to make a flashcards app. At the top is a title, some form elements that the input into them eventually makes it into the flashcard, and two buttons -- one to open the form elements to add a new flashcard and the other to delete all of the flashcards. I can code all of this up and have a background I choose but it takes up the height of the screen, not the height I give it. So what I am wanting is a background for the top of the page where the input and title and buttons are and a different background, preferably white, where the flashcards get put after the user hits the create button (part of the form elements for creating the form). I have included my code, it is not very long and I have commented out a thing I tried to fix the issue. I have tried to resize everything on the screen, put different parts of my CSS in other divs I have in my HTML to try an fix it. Basically everything I know and have tried has failed. I can only get one background. Can someone show me how to change the background after some header stuff to a different color for the rest of the page?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

/* Beginning of CSS for the Page that is not Eric Meyer's Reset Code */
body {
   background: rgb(211,211,211);
   max-width: 1680px;
   height: 100vh;
}

#wrapper {
   width: 90%;
   margin: 0 auto;
   min-height: 100%;
   background: antiquewhite;
}

header > h1 {
   font-size: 2rem;
   font-weight: bold;
   padding: 1rem 0;
   margin-left: 10px;
}

#topPartOfPage {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
   align-items: center;
   height: 275px;
   width: 100%;
}


#bottomPartOfPage {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
   width: 100%;
   height: auto;
   background: white;
}

/* #bottomOfPage::before {
   content: "";
}

#bottomOfPage:after {
   content: "";
}
 */

<html lang="en">
   <head>
      <title>Flashcards</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
      <div id="wrapper">
         <div id="topPartOfPage">
            <header>
               <h1>Flashcards</h1>
            </header>
            <secion>Form Elements for Creating the Flashcards</secion>
            <div id=buttons>
               <button type="button">Open up form elements</button>
               <button type="button">Delete all flashcards</button>
            </div>
         </div>
         <div id="bottomPartOfPage">
         </div>
      </div>
   </body>
</html>

Note, I am using Eric Meyer's Reset 2 for a CSS reset which makes it a bit long. But I did not want to leave it out if it is the culprit (which I doubt).

CodePudding user response：

In your html you have missed a “t” in section.

Change height setting to:

#bottomOfPage{
Height: minmax(100px,auto);
}

CodePudding user response：

Thanks, Niall, you got me thinking, All I needed to use was min-hieight in #bottomOfPage. I set mine to 800px and it looks good. I have to transfer this idea to my full project.