0
Ich entwerfe eine Vorlage, die eine Kopfzeile mit einem Logo auf der Oberseite und einen Container hat. Im Container befindet sich ein vertikales Navigationsmenü auf der linken Seite, ein horizontales Navigationsmenü oben und ein Inhaltsbereich im verbleibenden Containerbereich. Ich möchte, dass das vertikale Navigationsmenü eine Bildlaufleiste hat (funktioniert) und der Inhaltsbereich eine Bildlaufleiste hat (funktioniert nicht). Ich möchte keine Bildlaufleiste im horizontalen Navigationsmenü. Der gesamte innere Container ist fixiert, weshalb ich die Scrollbalken möchte. Warum werden die Bildlaufleisten nicht angezeigt? In der jsFiddle sollte der pinke Bereich die vertikalen Bildlaufleisten haben.Warum werden meine Bildlaufleisten nicht angezeigt?
Hier ist ein jsFiddle.
Das ist mein CSS:
body {
background: green;
margin: 0;
padding: 0;
color: #CCC;
}
a {
color: #999;
text-decoration: none;
}
#container-outer {
margin: 32px;
padding: 0;
}
#logo {
background: #000;
background-repeat: no-repeat;
margin: 32px auto;
width: 427px;
height: 66px;
}
#container-inner {
border: 1px solid #333333;
overflow: hidden;
position: fixed;
top: 130px;
left: 32px;
width: calc(100% - 64px);
height: calc(100% - 130px - 32px);
}
nav#navigation_primary {
background: red;
width: 15%;
border-right: 1px solid #333333;
height: 100%;
text-align: center;
float: left;
overflow: auto;
}
nav h3 {
text-align: center;
font-size: 24px;
line-height: 48px;
color: white;
}
nav#navigation_primary ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav#navigation_primary ul li {
border-top: 1px solid #222222;
border-bottom: 1px solid #000;
margin: 0;
background-image: url(../img/shadow_horizontal.png);
background-repeat: repeat-x;
}
nav#navigation_primary ul li a {
display: block;
padding: 12px 18px 18px 0px;
text-align: right;
color: #fff;
text-decoration: none;
}
nav#navigation_primary ul li a:hover {
background: #d28c17;
color: #333;
}
nav#navigation_secondary {
height: 66px;
background: blue;
margin: 0;
padding: 0;
width: calc(85% - 1px);
border-bottom: 1px solid #333333;
float: left;
}
nav#navigation_secondary ul {
list-style: none;
margin: 0;
padding: 0;
}
nav#navigation_secondary ul li {
display: inline-block;
}
nav#navigation_secondary ul li a {
display: block;
height: 66px;
line-height: 66px;
color: #666666;
font-size: 18px;
text-decoration: none;
padding: 0px 12px;
margin: 0;
background-image: url(../img/shadow_vertical.png);
background-repeat: repeat-x;
border-right: 1px solid #000;
border-left: 1px solid #222222;
}
nav#navigation_secondary ul li a:hover {
background: #d28c17;
color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #d28c17;
margin: 0px;
}
.panel {
border: 1px solid #333333;
padding: 8px;
overflow: auto;
}
input {
width: 100%;
padding: 8px;
background: #111111;
border: 1px solid #222222;
margin-top: 24px;
color: #666;
}
table {
margin: 16px 0px;
}
table tr td {
background: #111111;
padding: 8px;
}
main {
background: pink;
overflow-y: auto;
margin: 16px;
padding: 0;
float: left;
width: calc(85% - 33px);
min-height: 150%;
}
.row [class^="col-"]:first-child {
margin-left: 0;
padding-left: 0;
}
.row [class^="col-"]:last-child {
margin-right: 0;
padding-right: 0;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}<div id="container-outer">
<div id="logo">Logo Here</div>
<div id="container-inner">
<nav id="navigation_primary">
<h3>Nav Title</h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<nav id="navigation_secondary">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<main>
<div class="row">
<div class="col-12">
<div class="panel">
<h3>Heading</h3>
<table align="center" width="100%" cellspacing="1" cellpadding="5">
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
<tr>
<td><a href="#">link</a></td>
</tr>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
Die 'Container-inner' Klasse wird in seinem Inhaltsbereich nicht verwendet. Schau dir das JSFiddle an. –