Erstellen eines gemischten Pixels/prozentualen Layouts mit divs

Question

Ich versuche ein Seitenlayout zu erstellen, wie im angehängten Bild zu sehen ist. Das Problem ist, dass ich es nicht richtig funktionieren kann. Ich habe einen halben Tag damit verbracht, es zum Laufen zu bringen, aber ohne Erfolg. Ich möchte nur eine feste Breite div für das Menü und neben diesen zwei divs erstellen Spalten, die jeweils die Hälfte der verbleibenden Seitenbreite. Höhen müssen alle abhängig vom Inhalt sein.

Jeder eine Idee? Ich könnte viele Informationen über solche gemischten Percentage/Pixel-Layouts finden, aber ich kann mir nicht vorstellen, dass es so schwer ist.

Bild:

Answer 1

So etwas:

<style type="text/css"> 
.container 
{ 
    padding-left: 160px; 
    position: relative; 
} 
.leftmenu 
{ 
    width: 160px; 
    height: 200px; 
    background: red; /* For demo purposes */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.width50 
{ 
    width: 50%; 
    float: left; 
} 
.left-content 
{ 
    height: 300px; 
    background: green /* For demo purposes */ 
} 
.right-content 
{ 
    height: 150px; 
    background: blue /* For demo purposes */ 
} 
.clear 
{ 
    clear: both; 
} 
</style> 
<div class="container"> 
    <div class="leftmenu"></div> 
    <div class="content"> 
    <div class="width50 left-content"></div> 
    <div class="width50 right-content"></div> 
    <div class="clear"></div> 
    </div> 
</div> 

, dass nur der innere Behälter (ohne Kopf- oder Fußzeile) ist

Answer 2

ein JavaScript-Ansatz.

Hier hatte ich das Layout genau das, was Sie brauchen. Check this link.

Größe des Browsers ändern und aktualisieren. Du kannst sehen, dass es funktioniert!

Ich habe das folgende Skript verwendet, um die Bildschirmauflösung zu finden und dann die Inhaltsbreite zu berechnen.

<script type="text/javascript"> 
wscreen = window.innerWidth; //Determine screen resolution 
content_width = (wscreen - 160); //Adjusting the screen 
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS 
</script> 

Pure CSS-Ansatz wird auch funktionieren.

Prost !!!