<div class="container">
  <header>This is my header</header>
  
  <p class="content">This is my content.</p>
  
  <footer>This is my footer</footer>
  </div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

.container {
  height: 300px;
  width: 200px;
  display: flex;
  flex-direction: column;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
}

.content {
  flex: 1;
  padding: 10px;
}

header, footer {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
}