Currently, I am utilizing Bootstrap 4 and have a div set up as a container for three rows.
The first and third row are meant to be fixed, while the middle section (content) consists of a large form that should scroll. The goal is to keep the first and third rows visible at all times.
I seem to be having some difficulty achieving this setup. Could you provide some assistance?
Below is the code snippet I am working with:
<div class="container">
<div class="d-flex justify-content-center" style="position: absolute;left:20%;right:5%;top:10%;z-index: 1000;">
<div class="col-4">
<!-- Top navigation -->
<nav class="navbar navbar-default" role="navigation" id="navbar-example">
<div>
<ul class="nav navbar-nav">
<li><a href="#profile">Profile</a></li>
<li><a href="#">Courses</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row" style="padding-top: 5%;">
<input type="hidden" id="_token" >
<div class="col-md-12">
<div class="box box-primary">
<form class="form-horizontal"
data-target="#navbar-example" id="adaptation_form">
<div class="box-body">
<div id="profileAnchor" class="box box-secondary">
<div class="box-body">
<div class="panel panel-info">
<div class="panel-heading">Profile</div>
</div>
</div>
</div>
</div>
</form>
<div class="box-footer">
<a type="button" href="{{ route('adapt.cancel', [$id]) }}" class="btn btn-default">Cancel</a>
<button id="create_dataset" name="create_dataset" type='submit'
class="btn btn-primary pull-right">Submit
</button>
</div>
</div>
</div>
</div>
</div>
My objective is to ensure that the top navigation and footer remain fixed in their position. I attempted using 'position:fixed', but this caused overlap issues when scrolling through the content.
For reference, here are two screenshots highlighting my concerns:
1. In the first image, there is a header containing links for Profile and Courses. I would like this header to stay fixed while the rest of the content scrolls. https://i.sstatic.net/ci7Yc.png
2. However, when attempting to use 'position:fixed', I encountered an issue where the content overlapped as shown in the second screenshot: https://i.sstatic.net/lgj0w.png