Макет Flexbox css

Question

Я хотел бы исправить левую боковую панель и нижний колонтитул. кто-нибудь мне поможет?

Я хотел бы сохранить эту структуру, поэтому, имея только «основную» область со свитком, можно использовать flex?

Я заключаю html и css код бар наверху мне удалось исправить, но не могли бы вы сказать мне, если это правильный метод?

HTML

* {
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #edf0f1;
	
}

body {
	background-color: #24252a;
	margin: 0;
}

.logo {
	cursor: pointer;
	width: 100px;
	height: 50px;
	margin-right: auto;
}

.navbar {
	background-color: #1b1d22 !important;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 30px 20px;
	border-bottom: 1px solid #0088a9;
	background-color: #24252a;
	width: 100%;
	position: fixed;
	
}

.navbar a {
	padding: 14px 20px;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease 0s;
}

.navbar a:hover {
	color: #0088a9;
	text-decoration: none;
}


.container {
	display: flex;
	flex-wrap: nowrap;
}

.side {
	background-color: #1b1d22;
	flex: 20%;
	padding: 20px;
	border-right: 1px solid #0088a9;
}

.main {
  flex: 80%;
  padding: 20px;
}

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

<!-- Navigation Bar -->
<div class="container">
    <div class="navbar">
        <img src="img/logo.png" class="logo" alt="logo">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>
    <aside class="side">
        <h2>About Me</h2>
        <h5>Photo of me:</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        <h3>More Text</h3>
        <p>Lorem ipsum dolor sit ame.</p>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div>
    </aside>
    <!-- The flexible grid (content) -->
	<div class="main">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
        <h2>TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
	</div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

Answer 1

Если вы хотите прикрепить верхний и нижний колонтитулы с помощью flex, вот минимальный шаблон для начала:

/* layout*/
body {
margin:0;
height:100vh;/* would be wised to add a min-height to cover header + footer + a mimal height to see main */
display:flex;
flex-direction:column;
}
main {
flex:1;
overflow:auto;
background:gray
}

/* demo */
main:hover:before {
content:'200vh of height';
display:block;
padding:0 0 200vh 0;
}

<header>header of any height</header>
<main> scroll if needed</main>
<footer>footer of any height</footer>

возможный пример из вашего кода:

/* layout*/
body {
margin:0;
height:100vh;/* would be wised to add a min-height to cover header + footer + a mimal height to see main */
min-height:400px;
display:flex;
flex-direction:column;
}
main {
flex:1;
background:gray
}


/* ======= yours , with a couple fix =========== */
* {
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #edf0f1;
	
}

body {
	background-color: #24252a;
	margin: 0;
}

.logo {
	cursor: pointer;
	width: 100px;
	height: 50px;
	margin-right: auto;
}

.navbar {
	background-color: #1b1d22 !important;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 30px 20px;
	border-bottom: 1px solid #0088a9;
	background-color: #24252a;
	width: 100%;
 
	
}

.navbar a {
	padding: 14px 20px;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease 0s;
}

.navbar a:hover {
	color: #0088a9;
	text-decoration: none;
}


main {
	display: flex;
	flex-wrap: nowrap;
  min-height:0;
}

.side {
	background-color: #1b1d22;
	flex: 20%;
	padding: 20px;
	border-right: 1px solid #0088a9;
  overflow:auto;
}

.main {
  flex: 80%;
  padding: 20px;
overflow:auto;
}

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

@media screen and (max-width: 700px) {
  main {   
    flex-direction: column;
  }
  aside {order:2}
}
@media screen and (max-height : 400px) {
body::before {content:'WARNING: Looks like a min-height is a good idea,  Please run me in FULL PAGE , then resize window to test behavior';
display:block;
color:crimson;
padding:1em;
text-align:center;
background:gold;
}

<header>
<nav class="navbar">
        <img src="img/logo.png" class="logo" alt="logo">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        </nav>
        </header>
<main><aside class="side">
        <h2>About Me</h2>
        <h5>Photo of me:</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        <h3>More Text</h3>
        <p>Lorem ipsum dolor sit ame.</p>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div>
    </aside>
    <!-- The flexible grid (content) -->
	<div class="main">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
        <h2>TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
	</div></main>
<footer> <h2>Footer</h2></footer>