On my webpage, I have a layout that consists of a header, a footer, a left panel with inputs, and a right panel with outputs, all designed using bootstrap 4.
The left panel is typically shorter than the right panel, and its height may vary in relation to the window height. To address this, I am looking to implement a solution that will fix or float the left panel when the right panel is scrolling down, ensuring that users can always access the input options on the left.
- If the height of the left panel is less than the window height, it will be fixed or floated at the top of the window.
- If the height of the left panel exceeds the window height, it will be fixed or floated at the bottom of the window.
If my question is unclear, please let me know so I can provide further clarification.
https://i.sstatic.net/vqnfL.png
This example showcases the basic structure of my layout.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header style="height:100px;background-color:#ffd800"></header>
<div class="container">
<div class="row">
<div class="col-4" style="background-color:#00ff21;min-height:500px;height:1000px;">
</div>
<div class="col-8" style="background-color:#00ffff;min-height:1000px;height:3000px;">
</div>
</div>
</div>
<footer style="height:100px;background-color:#b6ff00"></footer>
</body>
</html>