让CSS类以%填充剩余宽度的剩余部分(帕格/杰德[副本]

所以我有一些问题,我的div没有正确对齐,这将需要非常适合。我用帕格作为模板。

  body
    .container
      .header
        include game_components/header.pug
      .game-row
        include game_components/game-row.pug
      .footer
        include game_components/footer.pug

标题:

doctype html
html(lang="en")
  .logo
    span PLH
  .user-info
    span PLH

游戏行:

doctype html
html(lang="en")
  .side-bar
    span PLH
  .action-scene
    span PLH

页脚:

doctype html
html(lang="en")
  .chat
    span Chat PLH

* {
   background-color: grey;
   border-radius: 10px;
}
.container {
    width: 80%;
    margin: 1px;
    margin: auto;
}

.header, .game-row, .footer {
    display: block;
}

.logo, .user-info, .side-bar, .action-scene, .chat {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    margin: 0.2em;
    border:  1px solid gold;
}

.logo, .user-info {
    height: 5em;
}

.logo, .side-bar {
    width:  10%;
}

.user-info, .action-scene {
    width:  85.45%;
}

.side-bar, .action-scene {
    height: 20em;
}

.chat {
    width: 100%;
    height: 15em;
}

http://prntscr.com/lvblcb (LightShot链接)

如果你看一下,你会发现聊天很适合它,因为它应该。但前两排很难合身。