Tips for creating a full screen div layout with fixed top and bottom navigation bars

Can someone help me achieve the following layout style?

+-----------------------------------------------------------+
| Top Sticky Nav                                            |
+--------------------------------------------------------+--+
|                                                        |S |
|                                                        |C |
| Div                                                    |R |
|                                                        |O |
|                                                        |L |
|                                                        |L |
+--------------------------------------------------------+--+
| Bottom Sticky Nav                                         |
+-----------------------------------------------------------+

I am looking to implement Bootstrap 4 nav bars that will stay fixed at the top and bottom of the page. In between them, there will be a content div that will display a scroll bar automatically if its content exceeds the space between the two Navs. The scrollbar should only appear on the div and not overlap with either of the navs.

While this concept seems straightforward, I have encountered some issues with responsiveness when switching between full screen, partial screen, and mobile sizes.

Just so you know, the contents of the div will be a Bootstrap 4 form.

Any suggestions or examples for achieving something similar would be greatly appreciated!

Also, it's worth mentioning that the div needs to adjust its position when the navbar collapses on a mobile device and the hamburger menu is displayed and opened.

Thank you in advance!

htmlcssbootstrap-4

Answer №1

When working with Bootstrap 4, you can utilize various position classes, such as .fixed-top to place an element at the top of the viewport edge to edge, and .fixed-bottom for positioning it at the bottom.

Your code structure should resemble this:

.red {
  background-color: red;
  height: 40px;
}
.blue {
  background-color: Aqua;
}

.container {
  margin-top: 40px;
  margin-bottom: 40px;
}
<div class="fixed-top red">Fixed top</div>
</div>
<div class="container">
  <div class="row">
    
    <div class="col-12 blue">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

  </div>
</div>

<div class="fixed-bottom red">Bottom</div>

In order to ensure proper spacing for the content, heights are specified for both the top and bottom fixed elements. This requires setting corresponding margins on the container element, matching the height of the top element for margin-top and bottom element for margin-bottom.

You can view a demonstration on Codepen.

Answer №2

Structuring with BS4

<div class="fixed-top">
<!-- top section with navbar or any other element -->
<nav class="navbar navbar-fixed-top">

</nav>
</div>

<div class="container">
  Choose between using class container, container-fluid, or section based on your needs 
</div>

<div class="fixed-bottom">
<!-- bottom section for footer or additional content -->
<nav class="navbar navbar-fixed-bottom">

</nav>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay insi ...

cssjavafxfxml

End of container Bootstrap 4 row with two columns at the edge

I'm currently working on an angular project with bootstrap 4. Within the container, there are two rows. I specifically want one row to always be positioned at the bottom of the container. Despite trying methods like justify-content: flex-end;, botto ...

javascriptcssangulartwitter-bootstrapbootstrap-4

The setStyle() method in JavaFX is like CSS Selectors

Is it possible to bind CSS files to style JavaFX components and also change properties dynamically in code? I'm struggling with the setStyle() method as there's limited documentation available on how to use it effectively. Instead of modifying t ...

csslistviewjavafxstyling

Guide on how to showcase an array in a string format using table rows in JavaScript or jQuery

After making an AJAX call to a PHP database, I receive a String as a result in my script. The format of the string is shown below: array(4) { [0]=> array(3) { ["id"]=> string(3) "181" ["number"]=> ...

javascriptphphtmljqueryarrays

There seems to be a glitch in my PHP comment validation function—it does not seem to be functioning

This form is contained in a PHP file named single.php. <form action="comments.php" method="post" > <?php include(ROOT_PATH . "/app/helpers/formErrors.php"); ?> <input type= "hidden" name="id" value= & ...

phphtml

Is the "data-export-data-type="all" parameter not functioning properly for exporting data from all pages within the bootstrap table plugin?

I'm currently utilizing the bootstrap table extended in conjunction with bootstrap 4. My goal is to utilize the export button to download data from all pages. The CSS file being used is: <link rel="stylesheet" href="https://unpkg.co ...

bootstrap-4datatableexport-to-csvbootstrap-table

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

htmlcssreactjsbootstrap-5

CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...

htmlcss

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Instructions for using an Angular directive to set focus on a "DIV" element when clicked <a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" ...

javascripthtmlangularjssetfocus

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Having worked in web design for quite some time, I recently began working on a basic Angular app that is meant to be very simple. For this project, I am only using the angular files and a single html file as the foundation. As I started setting up the bas ...

javascripthtmlcssangularjscss-selectors

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

javascripthtmljquerywrapper

What is the best way to adjust the position of the previous and next buttons on a Bootstrap 5 carousel?

I am having trouble figuring out how to properly position the previous and next buttons in a bootstrap5 carousel. The original code I used as a template was for a carousel that displayed 4 images at once, but I changed it to display 3 images at once. I a ...

htmlcssbuttoncarouselbootstrap-5

The BBCode seems to be malfunctioning

I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...

phphtmlbbcode

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

JavaScript code altered link to redirect to previous link

I added a date field to my HTML form. <input type="date" name="match_date" id="matchDate" onchange="filterMatchByDate(event)" min="2021-01-01" max="2021-12-31"> There is also an anchor tag ...

javascripthtml

Having trouble getting jQuery .click to trigger on a dynamically loaded button?

I'm having some trouble with my code. I have a list that loads dynamically with a button inside, and although I have set up jQuery to handle the click event, nothing is happening. Here's a snippet of the code: HTML: <ul id="cart"> ...

javascriptjqueryhtml

Arranging and overlaying images with HTML and CSS

Currently, I am in the process of developing a simplistic game through the use of HTML and CSS. The game consists of a background image portraying an alleyway, and my objective is to incorporate additional images on top of this background as clues within t ...

htmlcssz-index

Ensure that the text in the table with a width of 100% remains stable

Currently, I am encountering an issue with the inside text moving within my application on a webpage. In my previous tables, I utilized the min-width option to prevent the text or td from shifting when resizing the website page. For example, when stretchin ...

htmlcss