自动调整大小的 css

html, body {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  background: pink;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: green;
}
.footer {
  justify-self: flex-end;  
}
.content {
  flex: 1 0 200px;
  overflow: scroll;
}

<div class="container">
  
<div class="header">
For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored. I'm a thing. Say what? No, of course not. It was… uh… porno. Yeah, that's it. Hey! I'm a porno-dealing monster, what do I care what you think?  </div>
  <div class="content">
Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Also Zoidberg. Oh sure! Blame the wizards! It must be wonderful. No! The kind with looting and maybe starting a few fires!

    I suppose I could part with 'one' and still be feared…
    What are their names?
    Wow, you got that off the Internet? In my day, the Internet was only used to download pornography.

Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yes, I saw. You were doing well, until everyone died. Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say.

Fry, we have a crate to deliver. Does anybody else feel jealous and aroused and worried? You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! It's okay, Bender. I like cooking too.

Who said that? SURE you can die! You want to die?! You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Do a flip! As an interesting side note, as a head without a body, I envy the dead.

Who's brave enough to fly into something we all keep calling a death sphere? Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be…

I didn't ask for a completely reasonable excuse! I asked you to get busy! Stop! Don't shoot fire stick in space canoe! Cause explosive decompression! You won't have time for sleeping, soldier, not with all the bed making you'll be doing.

It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you? A true inspiration for the children.

Yes! In your face, Gandhi! WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! I was having the most wonderful dream. Except you were there, and you were there, and you were there! Isn't it true that you have been paid for your testimony?

Whoa a real live robot; or is that some kind of cheesy New Year's costume? When the lights go out, it's nobody's business what goes on between two consenting adults. Fry, you can't just sit here in the dark listening to classical music.

There's one way and only one way to determine if an animal is intelligent. Dissect its brain! And why did 'I' have to take a cab? And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!

We'll go deliver this crate like professionals, and then we'll go home. And from now on you're all named Bender Jr. Is that a cooking show? You're going back for the Countess, aren't you? Noooooo!

Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Why am I sticky and naked? Did I miss something fun?  </div>
  <div class="footer">
    lorem asdasd
  </div>
</div>