40/60 Split-Screen mit Containern

Question

Ich frage mich, was ist der beste Weg, um zwei Hintergrund divs (blau und grau) mit einem Behälter über die Spitze von ihnen (rot) zu erreichen:

http://s22.postimg.org/44kcq1cqp/screenshot_413.png

I würde zwei divs für die Hintergrundfarben und 100vh erstellen, aber wie würde ich einen Container auf der Oberseite überlagern, damit ich den Login-Bereich machen kann? Ich versuche, so etwas wie dieses Design zu erreichen:

http://s22.postimg.org/584h1zxdt/screenshot_414.png

Vielen Dank im Voraus!

Answer 1

hier ist, wie ich, dass :) ein einziger Container

https://fiddle.jshell.net/okjn0oca/

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content{ 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.left{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 40vw; 
 
    height: 100vh; 
 
    background-color: blue; 
 
} 
 

 
.right { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100vh; 
 
    width: 60vw; 
 
    background-color: green 
 
} 
 

 
.menu { 
 
    width: calc(100% - 30px); 
 
    height: 50px; 
 
    background-color: red; 
 
    margin: 15px auto; 
 
} 
 

 
.logo { 
 
    width: 60px; 
 
    height: 30px; 
 
    background-color: red; 
 
    margin: 15px; 
 
} 
 

 
.text{ 
 
    position: absolute; 
 
    width: 30vw; 
 
    height: 100px; 
 
    left: 5vw; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    background-color: yellow; 
 
}

<div class="content"> 
 
    <div class="left"> 
 
    <div class="logo"> 
 
     
 
    </div> 
 
    <div class="text"> 
 
     
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="menu"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie könnten ein 1px Hintergrundbild auf dem Körper verwenden:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAFeCAYAAABEunUfAAAAG0lEQVR42mMUYPj/n3GUGCVGiVFilBglhgMBAK5H0KGRPNKKAAAAAElFTkSuQmCC) no-repeat; 
background-size: 40% 100%; 

Here's a Codepen with the example

Mit dem Hintergrund Größe Sie die Pixel-Kraft 40% der Breite und 100% der Höhe zu decken.

Der 1px-Hintergrund wird mit png-pixel.com generiert.

Answer 3

Nicht sicher, ob Sie tatsächlich etwas versucht haben, aber hier ist etwas, was Sie versuchen können.

Angenommen, Sie möchten nur geteilte Farben für den Hintergrund haben, müssen Sie nicht zwei divs dafür verwenden. Sie können dies mit einem Farbverlauf tun (Lieferantenpräfixe nicht vergessen). Dann ist es nur eine Frage der Positionierung der "Overlay" Div wie Sie wollen.

.bg { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: relative; 
 
    background: linear-gradient(to right, rgba(0,56,199,1) 0%, rgba(0,56,199,1) 40%, rgba(74,74,74,1) 40%, rgba(74,74,74,1) 100%); 
 
} 
 

 
.overlay { 
 
    width: 60%; 
 
    height: 25%; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 10%; 
 
    background: white; 
 
}

<div class="bg"> 
 
    <div class="overlay"></div> 
 
</div>

Answer 4

Gebrauch machen würde.

<style> 
    .main 
    { 
     background:white; 
    } 

    .login 
    { 
     background:blue; 
    } 
</style> 


    <div class="main"> 
     <div class="col-md-5 no-margin"> 
      leave it blank 
     </div> 

     <div class="col-md-7 no-margin login"> 
      put your page contents here 
     </div> 
    </div>