flexbox-layout-mit-right2-und-co.php
Quell Code
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 14px;
box-sizing: border-box;
}
body {
background: lightgreen;
}
.flex-container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
.flex-container-navigation {
display: flex;
border-bottom: 2px solid black;
align-items: center;
justify-content: center;
padding: 2px 5px 2px 5px;
}
.maincontent {
display: flex;
padding: 5px;
}
.left-container {
display: flex;
flex-direction: column;
flex-basis: auto;
}
.left1 {
padding: 0px 0px 5px 0px;
min-width: 220px;
}
.left1 ul>button{
cursor:pointer;
border:none;
background: none;
text-align:left;
}
.dropdown ul {
display:flex;
flex-direction:column;
margin-top: -1000%;
}
.dropdown > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.dropdown > label{
display:block;
padding: 5px;
border: 1px solid black; background: white; cursor:pointer;
}.dropdown > label:after {
content: "|";
float: right;
}.dropdown:hover ul{
margin-top: 0%;
padding: 5px;
border: 1px solid black;
background: white;
}
.left2 {
flex: 1;
overflow: auto;
border: 1px solid black;
background: white;
padding-top: 5px;
margin-top: 5px;
}
.left2> ul{
height: auto;
display: flex;
flex-direction: column;
padding: 0px 5px 5px 5px;
}
.left2>ul button{
cursor:pointer;
border:none;
background: none;
text-align:left;
}
.left3 {
border: 1px solid black;
margin-top: 5px;
padding: 5px 5px 0px 5px;
}
.right-container {
display: flex;
flex-direction: column;
flex: 1;
padding-left: 5px;
width: 100%;
overflow-x: hidden;
}
.right1 {
border: 1px solid black;
padding: 5px;
}
.right2 {
flex: 1;
border: 1px solid black;
margin-top: 5px;
padding: 5px;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
background-color: white;
}
.right3 {
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="navigation">
<div class="flex-container-navigation">
<h5 class="headline"> HEADLINE </h5>
</div>
</div>
<div class="maincontent">
<aside class="left-container">
<div class="left1">
<div class="dropdown">
<input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
<label for="my-dropdown" data-toggle="dropdown"> ordner1 </label>
<ul>
<button type="submit" name="b1" value="b1">ordner1</button>
<button type="submit" name="b2" value="b2">ordner2</button>
<button type="submit" name="b1" value="b1">ordner3</button>
<button type="submit" name="b2" value="b2">ordner4</button>
<button type="submit" name="b1" value="b1">ordner5</button>
<button type="submit" name="b2" value="b2">ordner6</button>
</ul>
</div>
</div>
<div class="left2">
<ul>
<button type="submit" name="f11" value="f1">file1</button>
<button type="submit" name="f22" value="f2">file2</button>
<button type="submit" name="f11" value="f1">file3</button>
<button type="submit" name="f22" value="f2">file4</button>
<button type="submit" name="f11" value="f1">file5</button>
<button type="submit" name="f22" value="f2">file6</button>
</ul>
</div>
<div class="left3"> left3</div>
</aside>
<aside class="right-container">
<div class="right1"> file1 </div>
<div class="right2">
Hier ist eine lange lange lange lange lange lange lange lange lange lange lange lange lange lange
lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange
lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange
lange lange lange lange lange lange Zeile<br>
<br>
<br><br>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<p>bla ba</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br> letzte Zeile </div>
<div class="right3">
right3 </div>
</aside>
</div>
</div>
</body>
</html>