Mit der Seite, die nach rechts schweben und die ganze Seite mit nur CSS abdecken?

Question

Ich versuche, eine Seite wie diese img zu machen. Momentan arbeite ich an dieser Seitenleiste, und da ich HTML5 verwenden muss, dachte ich, dass das Element beiseite ist eine gute Option. Aber ich habe Probleme beim Positionieren wie auf dem Bild. Ist die beiseite gute Wahl oder wie kann dies auf andere Weise gelöst werden? Hier ist mein 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> 

und 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)); 
} 

Ich bin nicht in der Lage die Höhe 100% zu machen, während rechts schweben. Sobald ich Position bringe: absolut geht es ganz nach links, selbst Float ist nach rechts gesetzt.

Answer 1

Ich bin ein wenig verwirrt über das, was Sie wollen, aber ist das, was Sie wollen?

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

hinzugefügt I height: 100%; zum aside Element, und es macht die Elemente Höhe die volle Höhe des Elternelements überspannen. Versuchen Sie, um beide Elemente herum einen Wrapper einzufügen, um beide zu enthalten. Probieren Sie den folgenden Code aus.

Hier ist ein 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)); 
}