cssだけを使用して、全ページを右に浮かべてカバーします。

Question

私はこのようなページを作ろうとしていますimg。現在のところ、このサイドバーで作業しています.HTML5を使用する必要があるため、脇の要素は良い選択肢だと思っていました。しかし、私は写真のようにそれを配置するのに問題があります。脇見の良い選択か、これをどうやって他の方法で解決できるのでしょうか？ここで私は右浮動しながら、高さに100％を作ることができないんだけど、私の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)); 
} 

です。私がポジションを取るとすぐに、絶対的には左へ、フロートは右に設定されています。

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>

Answer 2

私はaside要素にheight: 100%;を追加し、それが要素の高さは、親要素の完全な高さにまたがることができます。両方の要素を囲むように両方の要素の周りにラッパーを追加してみてください。以下のコードを試してみてください。

ここにはfiddleがあります。

HTML

<div class="wrap"> 

    <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> 

</div> 

CSS

.wrap { 
    height: 2000px; 
} 

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%; 
    height: 100%; 
    background: linear-gradient(to bottom, rgba(206,206,206,0.3), rgba(206,206,206,1)); 
}