sorry for my English...
I want to make sidebar 100% height of the page. I set html:100% and then height: 100%. but as you see in screenshot the sidebar does not working. and the height is equal to the height of content inside that.
this is css code i wrote for that. I also use viewpoints for sidebar..............
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font-family: Tahoma, sans-serif;
}
body p {
font-family: 'Trebuchet MS', sans-serif;
}
.main {
width: 80%;
height: 100%;
background-color: #243E36;
color: #F1F7ED;
float: left;
position: relative;
}
header {
text-align: center;
margin: 20px auto;
border-bottom: 2px solid #E0EEC6;
width: 30%;
padding-bottom: 15px;
}
header h1 {
color: #C2A83E;
}
header p {
margin-top: 10px;
text-transform: uppercase;
word-spacing: 10px;
letter-spacing: 5px;
}
section {
color: #212121;
padding: 0 20px;
}
article {
width: 50%;
margin-bottom: 30px;
float: left;
}
article h2 {
padding: 15px;
}
article p {
text-align: justify;
padding: 0 15px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #7CA982;
text-align: center;
}
aside {
width: 20%;
min-height: 100%;
max-height: 100%;
background-color: #E0EEC6;
float: left;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<body>
<div class="container group">
<div class="main">
<!-- Header -->
<header>
<h1>My Personal NoteBook</h1>
<p>Welcome to my page</p>
</header>
<!-- Notes -->
<section class="group">
<article>
<h2>Title 1</h2>
<p>Posted on 2020/07/23</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sequi iusto! Facere, quos
tempore veritatis sit ratione iste perferendis quod possimus voluptatem, quam, non similique
labore quas adipisci corporis libero!</p>
</article>
</section>
<!-- Footer -->
<footer>
<p>©2020 My Nootbook</p>
</footer>
</div>
<!-- Sidebar -->
<aside style="height:100vh;">
<h1>SideBar</h1>
</aside>
</div>
</body>
One way you can do this is by using inline CSS in your sidebar div element
`
<div class="sidenav" style="height:100vh;position: fixed;">
About
Services
Clients
Contact
</div>"
`
I hope this example will give you a better idea.
You issues is you have used 2 floats elements, and float elements won't respect height:100%.
Solution #1: Float 1 div, and another using margin-left
html,body {
height: 100%;
}
.c-container {
height: 100%;
}
.c-content {
float: left;
width: 80%;
}
.c-sidebar {
margin-left: 80%;
height: 100%;
background: red;
}
<div class="c-container">
<div class="c-content ">
content
</div>
<div class="c-sidebar">
sidebar
</div>
</div>
Flex solution:
html,body {
height: 100vh;
}
.c-container {
display: flex;
height: 100%;
}
.c-content {
flex: 1 1 auto;
}
.c-sidebar {
width: 200px;
background: red;
}
<div class="c-container">
<div class="c-content ">
content
</div>
<div class="c-sidebar">
sidebar
</div>
</div>
Related
I'm new to this and this is the first web page I'm trying to create. By far I managed to create 3 columns and make them responsive. But the <h2> + <p> are bothering me. I'm trying to push them above the images when displayed on smartphone/tablet screens.
What should I use?
body, html {
height: 100%;
margin: 0;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(images/sanGalgano.jpg);
height: 70%;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
font-family: 'Bungee Outline', cursive;
font-size: 2rem;
display: inline-block;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.logo {
text-align: center;
position: absolute;
display: inline-block;
top: 43%;
left: 56%;
width: 45%;
}
/* 3 circles panel */
.container {
background-color: #1F3740;
display: inline-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.box img {
width: 70%;
height: auto;
border-radius: 50%;
padding-top: 1.5rem;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
max-width: 25rem;
min-width: 18rem;
margin: 60px;
text-align: center;
}
.box.description {
margin-top: 0;
}
h2 {
font-family: 'Nothing You Could Do', cursive;
font-size: 3rem;
color: #d4af37;
display: inline-block;
clear: left;
}
p {
font-family: 'Quicksand', sans-serif;
color: #A0C9D9;
font-size: 2rem;
text-align: center;
}
/* 3 columns panel */
.container2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding: 0 4px;
position: relative;
}
.column {
flex: 20%;
max-width: 20%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 30%;
}
.descrizione {
position: absolute;
top: 30%;
right: 70%;
text-align: center;
}
.descrizione p {
color: #1F3740;
}
<div class="hero-image">
<div class="hero-text">
<h1>Francesco <br> Gallo <br> Fotografo</h1>
<div>
<img class="logo" src="images/logo2.png" alt="">
</div>
</div>
</div>
<div class="container">
<div class="box">
<img src="images/torta.png">
</div>
<div class="box">
<img src="images/bacio.jpg">
</div>
<div class="box">
<img src="images/amiche.png">
</div>
<div class="box description">
<h2>Per i vostri momenti speciali</h2>
<p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit.<br> Similique molestias hic velit,<br> ipsum facere nemo minus distinctio <br> est quidem neque.
</p>
</div>
</div>
<div class="container2">
<div class="descrizione">
<h2>Ciao, sono Francesco!</h2>
<p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit.<br> Similique molestias hic velit,<br> ipsum facere nemo minus distinctio <br> est quidem neque.
</p>
</div>
<div class="column">
<img src="images/torta.png">
<img src="images/abbraccio.png">
</div>
<div class="column">
<img src="images/vestito.png">
<img src="images/amiche.png">
</div>
<div class="column">
<img src="images/bacio.jpg">
<img src="images/bolle3.png">
</div>
</div>
I'm trying to create a same-height column which was 2 boxes to the left and 1 box to the right. Something on this line where 01 & 02 combined together has the same height as 03:
Demo: https://jsfiddle.net/bptdqx67/2/
HTML
<div class="row">
<div class="col-7">
<div class="h-100">
<div class="thankyou__box blue">
<div class="thankyou__number">
<h4>01</h4>
</div>
<div class="thankyou__content">
<p>This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. </p>
</div>
</div>
<div class="thankyou__box green">
<div class="thankyou__number">
<h4>02</h4>
</div>
<div class="thankyou__content">
<p>This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. </p>
</div>
</div>
</div>
</div>
<div class="col-5">
<div class="thankyou__box green thankyou__height">
<div class="thankyou__number">
<h4>03</h4>
</div>
<div class="thankyou__content">
<p>This is the third box. This is the third box. This is the third box. This is the third box. This is the third box.</p>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col {
/*flex: 0 0 20%;
*/
width: 20%;
float: left;
padding: 1px;
}
[class*="col-"] {
float: left;
padding-left: 5px;
padding-right: 5px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.h-100 {
height: 100%;
}
.thankyou__box {
padding: 15px;
border-radius: 4px;
margin-bottom: 10px;
background-size: 50px;
background-repeat: no-repeat;
background-position: 98% 95%;
}
.thankyou__box.blue {
border: 2px solid #c9f5ff;
}
.thankyou__box.green {
border: 2px solid #c6dc9c;
}
.thankyou__number {
width: 33px;
display: inline-block;
vertical-align: top;
float: left;
}
.thankyou__content {
width: calc(90% - 40px);
display: inline-block;
}
.thankyou__content p {
margin: 0;
}
.thankyou__height {
height: 100%;
background-size: 100px;
background-position: 95% 100%;
}
.thankyou__height .thankyou__content {
width: calc(100% - 33px);
}
Adding display:flex to .row would solve this problem.
Using Grid will greatly simplify your layout rules. Here is a straightforward approach with no dependencies. Once we declare the parent as a grid container, we can create rules for how the children behave.
.right {
grid-column: 2; /* begin at column two */
grid-row: 1 / 3; /* span from the first grid line to the third */
}
With this in place the right column's height will always be the sum of the children in the first column.
.grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-gap: 2px;
}
.right {
grid-column: 2;
grid-row: 1 / 3;
background-color: red;
}
.grid * {
padding: 1em;
}
.grid *:not(.right) {
background-color: #ccc;
}
<div class="grid">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nemo doloremque tempora porro quos natus odio est tenetur facilis commodi voluptatum reprehenderit, in, consequatur pariatur. Voluptatum quam, modi sit. Eos. lorem</div>
<div class="btm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ut maiores perspiciatis temporibus quae magni enim quas rerum deserunt expedita voluptas deleniti, labore dolore possimus quis officiis ducimus vel repellat.</div>
<div class="right"></div>
</div>
jsFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
width: 100%;
}
.container__inner {
display: flex;
}
.container__col:nth-child(1) {
width: 60%;
margin-right: 30px;
}
.container__col:nth-child(1) .container__item {
height: 100px;
}
.container__col:nth-child(2) {
width: 40%;
}
.container__col:nth-child(2) .container__item {
height: 100%;
}
.container__item {
display: block;
border-radius: 4px;
border: 2px solid green;
margin-bottom: 30px;
width: 100%;
}
.container__item:last-of-type {
margin-bottom: 0;
}
<div class="container">
<div class="container__inner">
<div class="container__col">
<div class="container__item"></div>
<div class="container__item"></div>
</div>
<div class="container__col">
<div class="container__item"></div>
</div>
</div>
</div>
I have 3 column grid with images using flexbox. The issue I encountered is how to properly put smaller image in the middle column to the bottom and the center text vertically in the rest space using flexbox.
I have very ugly solution, which quite unresponsive, so I sure the is better solution for this. Read some articles and watch 3 video courses about flexbox, but didn't found a case with such situation.
Also tried to make smaller image absolute, but then I couldn't center text vertically as I wanted.
Would be grateful for any suggestions.
.container{
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2{
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
}
.message{
font-size: 2.3vw;
margin: 0 auto;
}
.message p {
color: blue;
font-size: 2vw;
max-width: 80%;
margin: 0 auto;
padding: 34.5% 0px;
}
.author{
position: relative;
}
.author:after{
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color:red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
You need to use margin-top: auto; in both your message and your image. There's a really good explanation by Michael_B here about the use of auto margins with flexbox.
jsFiddle
CODE SNIPPET:
.container {
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2 {
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
margin-top: auto;
}
.message {
font-size: 2.3vw;
margin-top: auto;
}
.message p {
color: blue;
font-size: 2vw;
}
.author {
position: relative;
}
.author:after {
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color: red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
I have created a jsfiddle for you to see what I'm doing.
https://jsfiddle.net/pksml/3mp1Lnw8/5/
#page-wrapper {
margin-left: 205px;
background-color: green;
}
The menu wrapper (orange) and the page wrapper (green) should both be at the top of the content wrapper (blue). But the green block looks to have a top margin (which it doesn't).
My question is this: why don't the orange and green blocks both line up at the top of the blue block?
Is some of my CSS code wrong? Thanks for your input!
It is the default margin of p tag which is pushing the green div down.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
float: left;
}
#page-wrapper {
margin-left: 205px;
background-color: green;
}
p{
margin: 0 0 20px;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum,
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->
You need to float both menu-wrapper and page-wrapper.
Looks like from your addition of the right margin you are trying to position the left menu? If so you could do something like this: https://jsfiddle.net/jgoley/98abyyp2/
jsfiddle
#page-wrapper {
float:left;
background-color: green;
}
use float:left instead of marigin left
I think the code below should work for you!
All I added was display: inline-block; to #menu-wrapper and #page-wrapper.
All I removed was the float: left; from #menu-wrapper and margin-left: 205; from #page-wrapper.
HTML {
background: #cccccc;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#bounding-wrapper {
min-width: 320px;
width: 100%;
padding: 10px;
}
#content-wrapper {
width: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
height: auto !important;
background-color: blue;
}
#menu-wrapper {
width: 200px;
background-color: orange;
display: inline-block;
}
#page-wrapper {
background-color: green;
display: inline-block;
}
<div id="bounding-wrapper">
<div id="content-wrapper">
<div id="menu-wrapper">
this is in the menu wrapper
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
<p>this is in the page wrapper</p>
</div>
<!-- page wrapper -->
</div>
<!-- content wrapper -->
</div>
<!-- bounding wrapper -->
Hope that helped!
you have two solutions,
you can set the display property of the #page-wrapper to be
display:inline-block
if you don't want to change its display property for any reason so
you can add float:left to the #page-wrapper as well
then no need for margin-left:205px in #page-wrapper
http://codepen.io/craigiswayne/pen/mPxJqv
** Makes use of flex box **
CSS:
.block{
width:100px;
height:100px;
background-color:#8BC34A;
}
.block.fill{
background-color:#F44336;
-webkit-flex: 1;
flex: 1;
}
.container {
display: -webkit-flex;
display: flex;
width:100%;
}
I have a webpage where I would like all the elements fixed in place so that there are no scrollbars for the page as a whole. I have a header, a menu on the left side, and an area where a plot will appear and then directly below the plot should be a list.
There is a gap between the header and the plot area that I can't get rid of. I have the margins and padding already set to 0. Also, the plot should be taking up 60% of the room below the header and the list 40%, but neither are correct and both elements end well above the bottom of the page in the vertical.
html,
body {
margin: 0;
padding: 0;
}
.float {
width: 100%;
background-color: blue;
padding-top: 60px;
display: flex;
display: -webkit-flex;
}
.main_title {
width: 70%;
height: 60px;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
flex-flow: column;
justify-content: center;
background-color: red;
}
.clock {
width: 30%;
height: 60px;
background-color: green;
}
.header {
display: -webkit-flex;
display: flex;
height: 60px;
position: fixed;
width: 100%;
background-color: red;
margin: 0;
}
.menu {
width: 130px;
flex: 0 0 130px;
background-color: yellow;
height: 100%;
position: fixed;
}
.column_main {
flex: 1;
background-color: purple;
padding-left: 130px;
float: right;
}
.plot-wrapper {
width: 100%;
background-color: brown;
height: 60%;
}
#list {
background-color: lightblue;
width: 100%;
height: 40%;
position: fixed;
}
<body>
<div class="header">
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
</body>
If I understood your right, the following is one way of doing it that does not involve using flex.
In the header, I use floats to place the two elements side by side.
I then use absolute positioning to create the .float panel, adjusting the top offset to set the top edge right below the header, and stretching it full width and to the bottom by setting all other offsets to zero.
I then use absolute positioning to place the .menu to the left, taking up the left 130px width of the block, and then simarly to create a the .column_main block such that it takes up the remainder of the space.
Within .column_main, I keep .plot-wrapper and #list as regular in-flow elements and set the heights to 60% and 40% respectively. I add overflow: auto so as to prevent any margins (on p elements for example) from collapsing and creating unwanted whitespace.
html, body {
margin: 0;
padding: 0;
}
.header {
height: 60px;
background-color: red;
overflow: auto;
}
.main_title {
float: left;
width: 70%;
height: 60px;
background-color: red;
}
.clock {
float: left;
width: 30%;
height: 60px;
background-color: green;
}
.float {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 0;
}
.menu {
background-color: yellow;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 130px;
}
.column_main {
position: absolute;
left: 130px;
right: 0;
top: 0;
bottom: 0;
background-color: purple;
}
.plot-wrapper {
overflow: auto;
background-color: brown;
height: 60%;
}
#list {
overflow: auto;
background-color: lightblue;
height: 40%;
}
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
I changed your code a bit but I was confused in your explanation, so I did this, If I am incorrect I apologize but hey I tried. :D
HTML:
<div id="page">
<header class="main-hdr">
<div>
<h1>Title</h1>
</div>
<div>00:00:00</div>
</header>
<main class="main-content">
<nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<section>
<h2>Plot</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
</section>
<aside>
<h3>Lists</h3>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</main>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
}
body {
text-align: center;
background-color: #fff;
color: #000;
font-size: 100%;
overflow: hidden; /*prevent scrollbars*/
}
header, main, section, aside, nav {
display: block;
}
#page,
.main-hdr {
width: 100%;
clear: both;
margin: 0 auto;
overflow: hidden;
}
.main-hdr {
display: flex;
}
.main-hdr div {
float: left;
}
.main-hdr div:first-child {
background-color: #aa0b6b;
width: 80%;
}
.main-hdr div:last-child {
width: 20%;
background-color: #20aa5c;
}
.main-content {
clear: both;
}
.main-content nav {
float: left;
width: 20%;
}
.main-content section {
width: 60%;
float: left;
}
.main-content aside {
width: 20%;
float: left;
}
RESULT:
EXAMPLE
Here's a plunker and a snippet below:
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
width: 100vw;
height: 100vh;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
color: #111;
background-color: lightblue;
font-variant: small-caps;
font-size: 1rem;
}
.shell {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.core {
width: calc(100% - 130px);
height: calc(100% - 60px);
background-color: blue;
left: 130px;
top: 60px;
position: fixed;
}
.title {
width: 70%;
line-height: 1;
vertical-align: central;
background-color: red;
position: fixed;
top: 14px;
}
.clock {
width: 30%;
height: 60px;
background-color: lime;
position: fixed;
right: 0;
top: 0;
}
header {
height: 60px;
width: 100%;
background-color: red;
top: 0;
left: 0;
z-index: 11;
position: fixed;
}
.menu {
width: 130px;
background-color: yellow;
height: calc(100% - 60px);
top: 60px;
left: 0;
position: fixed;
}
.plot {
width: calc(100% - 130px);
background-color: brown;
height: calc(60% - 30px);
top: 60px;
left: 130px;
position: fixed;
}
#list {
background-color: lightblue;
width: calc(100% - 130px);
height: calc(40% - 30px);
bottom: 0;
left: 130px;
padding: 20px;
position: fixed;
}
#list dd {
text-indent: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section class="shell">
<header class="header">
<h1 class="title">title</h1>
<h3 class="clock">time</h3>
</header>
<nav class="menu">
<h3>Menu</h3>
</nav>
<main class="core">
<section class="plot">
<h2>plot wrapper</h2>
</section>
<dl id="list">
<dt>List Section</dt>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
</dl>
</main>
</section>
</body>
</html>