html - 使用 aside which float right 并仅使用 css 覆盖整个页面？

Question

我正在尝试制作这样的页面 img .目前我正在处理这个侧边栏，因为我需要使用 HTML5，所以我认为 aside 元素是一个不错的选择。但是我无法像图片中那样定位它。 aside 是好的选择还是如何以其他方式解决？这是我的 html

<section id = "overview"></section>
<aside>
    <h1>Serverstatus:</h1>
    <div id ="benutzerContainer">
        <h2 class = "firstLine">Benutzer</h2>
        <p class = "firstLine">Administrator</p>
    </div>
    <div id = "zeitContainer">
        <h2 class = "secondLine">Systemstartzeit</h2>
        <p class = "secondLine">10:00</p>
    </div>
    <div id = "datumContainer">
        <h2 class = "thirdLine">Systemstartdatum</h2>
        <p class = "thirdLine">06.03.2017</p>
    </div>
    <div id ="loginContainer">
        <h2 class ="fourthLine">Fehlgeschlagene <br />
        Logins</h2>         
        <p class ="fourthLine">3</p>
    </div>
    <aside>

和CSS

section#overview{
width: 100%
background: linear-gradient(to bottom, rgba(206,206,206,0.3),      rgba(206,206,206,1)); 

}
aside {
float: right;
width: 25%;
background: linear-gradient(to bottom, rgba(206,206,206,0.3), rgba(206,206,206,1));
}

我无法在向右浮动时使高度达到 100%。只要我把 position: absolute 放在左边，即使是 float 也被设置到右边。

Answer 1

我有点不明白你想要什么，但这就是你想要的吗？

body {
  background: linear-gradient(to bottom, rgba(206, 206, 206, 0.3), rgba(206, 206, 206, 1));
}

* {  box-sizing: border-box;  }

section#overview {
  width: 75%;
  height: 100%;
  border-right: 1px #ccc solid; /* Switch if overview if taller */
  float: left;
}

aside {
  float: right;
  width: 25%;
  height: 100%;
  border-left: 1px #ccc solid;
}

<section id="overview">
  afwef foawjp foij oaijfw eoijfpa ojifojiaepo ijfapo jifpeo jiafwo f oijapojiefoajfweojifapofjiep ojioi jofiajpoj foajwejiawj ofji ofjawoj pofja oifjaeo jfaoji ojfaowj ofij ojfoawij pofijaw pofijawepoj 
</section>
<aside>
  <h1>Serverstatus:</h1>
  <div id="benutzerContainer">
    <h2 class="firstLine">Benutzer</h2>
    <p class="firstLine">Administrator</p>
  </div>
  <div id="zeitContainer">
    <h2 class="secondLine">Systemstartzeit</h2>
    <p class="secondLine">10:00</p>
  </div>
  <div id="datumContainer">
    <h2 class="thirdLine">Systemstartdatum</h2>
    <p class="thirdLine">06.03.2017</p>
  </div>
  <div id="loginContainer">
    <h2 class="fourthLine">Fehlgeschlagene <br />
        Logins</h2>
    <p class="fourthLine">3</p>
  </div>
  <aside>