When the screen size is larger than 768px, my layout looks like this: https://i.sstatic.net/nE4Qp.png
However, I want the vertical navbar height to extend to the footer even when resizing the screen. This is the desired layout: https://i.sstatic.net/z98Uf.jpg
including the background color.
Here are the HTML and CSS files:
article {
text-align: left;
}
header {
background: black;
color: white;
padding: 10px;
text-align: center;
}
nav {
background: #eee;
padding: 10px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;/*Remove padding from ul*/
}
li a{
display: block;/*Separate padding by rows*/
padding: 8px 16px;
color: #000;/*Remove default link color*/
text-decoration: none;/*Remove link underline*/
}
li a:hover {/*Hover effect*/
background-color: #555;
color: white;
}
footer{
background: #aaa;
color: white;
padding: 0px;
}
img{
padding: 10px;
height: 505px;
width: 829px;
}
/*Reposition elements when width is >=768px for all devices*/
@media all and (min-width: 768px){
nav {
text-align: left;
max-width: 200px;
float: left;/*Move content to the right*/
}
article {
margin-left: 250px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<header>
<h1 id="T">Index</h1>
</header>
<nav>
<ul>
<li><a>Topologies</a></li>
<li><a>Classification</a></li>
<li><a>Terminology Dictionary</a></li>
<li><a href="Pages\Domains.html">Domains</a></li>
<li><a>Devices</a></li>
</ul>
</nav>
<article>
<h2>Definition of Network</h2>
A telecommunications network is a collection of devices and their connections (physical or logical) that allow the transmission and reception of information of any kind between two or more users located in geographically distant locations, transferring it through cables, radio systems, or other electromagnetic or optical systems.
<br><br><img src="Images/NetworkImage.png">
</article>
<footer>
<p>Last updated: Saturday, May 19th</p>
<p><a href="#T">Back to Top</a></p>
</footer>
</body>
</html>I am seeking a layout similar to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox
In the provided example, the navbar height expands to the footer.