I have a basic website using Bootstrap CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eff2ed">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Scrollbar background */
::-webkit-scrollbar-track {
background: rgb(244, 244, 244);
}
/* Scrollbar handle */
::-webkit-scrollbar-thumb {
background: rgba(200, 200, 200, 12);
}
/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(80, 20, 160);
}
p, ul {
font-family:Consolas;
padding:1%;
font-size:12px
}
footer {
text-align:center;
font-size:10px;
}
#scrollablediv {
overflow-y: scroll;
height:50%;
}
/* Making images black-and-white and colourful when hovered. */
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all .5s ease;
}
img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
</style>
</head>
<body style="margin:.2%; padding:3%; height: 70px">
<header>
<h1 style="font-family:consolas; font-size:18px">Header here!</h1>
</header>
<hr>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
<div id="scrollablediv">
<h6>Title1</h6>
<p>
<b>TL;DR:</b> Some text..
<br><br>
<b>TS;WM:</b> Some text..
</p>
<h6>Title2</h6>
<p> Some text..
</p>
<h6>Title3</h6>
<ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
<li>
Some text..
<li>
<li>
Some text..
<li>
</ul>
<h6>Title4</h6>
<p>
Some text..
</p>
<h6>Title5</h6>
<p>
Some text..
</p>
<h6>Title6</h6>
<ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
<li>
Some text..
<li>
<li>
Some text..
<li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<footer>© 2022.</footer>
</div>
<div class="row">
<script src="bootstrap-5.2.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
On larger screens, the
<div class="row">
element becomes very tall, causing its child elements (cols) to stretch accordingly.
If you observe the website, you'll see that the scrollablediv
element's height is not as large, but its parent row
element is excessively tall. I am seeking a way to make a container row the same size as its children columns.
How can this be achieved?