Fixed toggleable footer in a 3 column layout - css

Question

So I was trying to create a 3 columns layout with:
left panel column: scrollable vertical menu. shown by default but toggleable.
right panel column: scrollable action menu. hidden by default but toggleable.
content: scrollable content that adjusts to the remaining content of the page so whenever left, right o bottom panels (see below point) are toggled the content will not be covered and the div will adjust itself.
bottom panel: not scrollable. hidden by default but toggleable. When showing it should be sticking at the bottom of the screen and stay visible there, even if I scroll the content div). This should also be as wide as the content panel described above.
So far I was able to create a snippet with toggleable right and left column and content is adjusting to it:
$(".header_container > .content").append(() => {
return "header<br>";
});
$(".right_container > .content").append(() => {
return "MENU ITEM RIGHT<br>".repeat(100);
});
$(".left_container > .content").append(() => {
return "MENU ITEM LEFT<br>".repeat(100);
});
$(".terminal_container > .content").append(() => {
return "terminal ".repeat(100);
});
$(".body_container > .content").append(() => {
return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});
$(".hideleft").click(() => {
$(".left_container").toggle();
});
$(".hideright").click(() => {
$(".right_container").toggle();
});
.container {
width: 90%;
height: 180px;
border: 3px solid;
position: absolute;
}
.header_container {
width: 100%;
height: 50px;
background-color: #DDD;
}
.left_container {
height: 100%;
width: 200px;
background: green;
float: left;
overflow: scroll;
}
.center_container {
width: auto;
height: 100%;
background: red;
overflow: scroll;
}
.right_container {
height: 100%;
width: 200px;
background: blue;
float: right;
overflow: scroll;
display: none;
}
.terminal_container {
height: 200px;
overflow: hidden;
background-color: black;
color: white;
}
.content {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>
<div class="container">
<div class="right_container">
<div class="content">
</div>
</div>
<div class="left_container">
<div class="content">
</div>
</div>
<div class="center_container">
<div class="body_container">
<div class="content">
</div>
</div>
<div class="terminal_container">
<div class="content">
</div>
</div>
</div>
</div>
However I cannot get the CSS to work for the bottom log panel (possibly with only css).
Could anyone help me out to figure out how to have the bottom panel?

Answer 1

Without Classes through jQuery
Try this. I'm pretty sure that the + selector is CSS3 though.
$(".header_container > .content").append(() => {
return "header<br>";
});
$(".right_container > .content").append(() => {
return "MENU ITEM RIGHT<br>".repeat(100);
});
$(".left_container > .content").append(() => {
return "MENU ITEM LEFT<br>".repeat(100);
});
$(".terminal_container > .content").append(() => {
return "terminal ".repeat(100);
});
$(".body_container > .content").append(() => {
return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});
$(".hideleft").click(() => {
$(".left_container").toggle();
});
$(".hideright").click(() => {
$(".right_container").toggle();
});
$(".hidebottom").click(() => {
$(".terminal_container").toggle();
});
.container {
width: 90%;
height: 180px;
border: 3px solid;
position: absolute;
}
.header_container {
width: 100%;
height: 50px;
background-color: #DDD;
}
.left_container {
height: 100%;
width: 200px;
background: green;
float: left;
overflow: scroll;
}
.center_container {
width: auto;
height: 100%;
background: red;
}
.right_container {
height: 100%;
width: 200px;
background: blue;
float: right;
overflow: scroll;
display: none;
}
.body_container {
height: 100%;
overflow: scroll;
}
#bottom { display: none; }
#bottom:checked + .body_container {
height: 80%;
}
.terminal_container {
height: 20%;
overflow: hidden;
display: none;
background-color: black;
color: white;
}
.content {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>
<label class="hidebottom" for="bottom">Toggle Bottom</label>
<div class="container">
<div class="right_container">
<div class="content">
</div>
</div>
<div class="left_container">
<div class="content">
</div>
</div>
<div class="center_container">
<input type="checkbox" id="bottom">
<div class="body_container">
<div class="content">
</div>
</div>
<div class="terminal_container">
<div class="content">
</div>
</div>
</div>
</div>
With Classes through jQuery
This solution adds classes when it toggles whether it displays or not, then sets the width through CSS.
I normally would all element's widths using percentages instead of pixels so that I don't have to use calc statements.
$(".hideleft").click(() => {
$(".left_container").toggle();
$("body").toggleClass("left");
});
$(".hideright").click(() => {
$(".right_container").toggle();
$("body").toggleClass("right");
});
$(".hidebottom").click(() => {
$(".terminal_container").toggle();
$("body").toggleClass("bottom");
});
.container {
width: 90%;
height: 70%;
border: 3px solid;
position: absolute;
}
.header_container {
width: 100%;
height: 50px;
background-color: #DDD;
}
.left_container {
height: 100%;
width: 20%;
background: green;
float: left;
overflow: scroll;
}
.right_container {
height: 100%;
width: 20%;
background: blue;
float: right;
overflow: scroll;
display: none;
}
.center_container {
width: auto;
height: 100%;
position: relative;
}
.body_container {
background: red;
overflow: scroll;
position: absolute;
top: 0;
height: 100%
}
.terminal_container {
height: 100px;
width: 100%;
overflow: hidden;
background-color: black;
color: white;
position: absolute;
bottom: 0;
}
.content {
padding: 15px;
}
/* Layout */
.left .center_container {
float: right;
width: 80%;
}
.right .center_container {
float: left;
width: 80%;
}
.left.right .center_container {
width: 60%;
}
.bottom .body_container {
bottom: 100px;
height: auto;
width: 100%;
}
<body class="left">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="right_container">
<div class="content">
MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>
</div>
</div>
<div class="left_container">
<div class="content">
MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>
</div>
</div>
<div class="center_container">
<div class="body_container">
<header>
<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>
<button class="hidebottom">Toggle Bottom</button>
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</div>
</div>
<div class="terminal_container" style="display: none">
<div class="content">
terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal
</div>
</div>
</div>
</div>
</body>