CSS navbar, sidebar und content-Bereich

Question

Ich versuche eine feste Navbar und ein sidemenu zu erstellen, aber einen scrollbaren Inhaltsbereich.

Mein codepen - http://codepen.io/anon/pen/jryKvY

jedoch meine Inhalte Scheibe des Hintergrund würde den Überlauf Inhalt, wenn gescrollt einfach nicht füllen.

Wie soll ich das beheben, ohne overflow: scroll zu meinem Content-Bereich div.

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*::after, 
 
*::before { 
 
    box-sizing: inherit; 
 
} 
 
.container { 
 
    height: 100%; 
 
    position: static; 
 
    max-width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.container::after { 
 
    clear: both; 
 
    content: ""; 
 
    display: block; 
 
} 
 
.container .navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: grey; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.container .contentpane { 
 
    background: lightsalmon; 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 250px; 
 
} 
 
.container .sidemenu { 
 
    background: lightblue; 
 
    width: 250px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 50px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="container"> 
 

 
    <div class="navbar"> 
 
    navbar 
 
    </div> 
 

 
    <div class="contentpane"> 
 
    <h1>Content</h1> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 

 
    <div class="sidemenu"> 
 
    menu 
 
    </div> 
 

 
<div>

Answer 1

Sie den Hintergrund auf dem anstelle html oder body Element festlegen, beispielsweise

body { 
    background: lightsalmon; 
} 

Es wird den Hintergrund macht das gesamte Ansichtsfenster abdecken, mit dem Hintergrund der navbar und Seitenleiste oben drauf, so sieht es aus nur das Content-Panel eingestellt. Es funktioniert auch, wenn der Inhalt kürzer oder auf einem größeren Bildschirm ist, mit anderen Worten, wenn die Bildlaufleiste nicht benötigt wird.

jsFiddle

Answer 2

Entfernen Sie Ihre vorherigen contentpanel und versuchen diese,

.container > .contentpane { 
    background: lightsalmon; 
    top: 29px; 
    width:auto; 
    height:auto; 
    position:relative; 
    margin-left:242px;/*Set that equal to or less then the width of sidemenu*/ 


}