“コンテンツの内容が少ない時でもcontainerがブラウザの下まであるようにするにはどうしたらいいですか？
また、コンテナの上下に1remの空白を設けてスクロールバーが出ないようにできますか？”

はい、それは可能です。`min-height` の値を `calc(100vh - 2rem)` に設定することで、上下に `1rem` の空白を設けることができます。また、`box-sizing: border-box;` を追加することで、パディングとボーダーが要素の幅と高さに含まれるようにします。以下にコードを示します：

.container {
  width: 80%;
  color: white;
  background-color: teal;
  margin: 1rem auto; /* 上下に1remのマージンを設定 */
  min-height: calc(100vh - 2rem); /* 上下のマージンを考慮 */
  box-sizing: border-box; /* パディングとボーダーを要素の幅と高さに含める */
  border: 3px solid black;
  padding: 1rem;
}

このコードにより、コンテナはブラウザの全体の高さから `2rem` を引いた高さを占め、上下に `1rem` の空白が設けられます。そして、縦のスクロールバーは表示されなくなります。