The top header must remain fixed at the top, while the bottom footer should stay fixed at the bottom of the page. The main div will then adjust to fill

My HTML code is structured using Bootstrap to create a grid layout. The goal is to have the NAV BAR and FOOTER contained within the left container, allowing the SIDEBAR on the right to display without overlapping. Here's an example image of what I'm aiming for:

https://i.sstatic.net/Kpk35.jpg

The challenge I'm facing is getting the footer to stay positioned at the bottom of the parent div, which is the main row containing all the nested divs. I've tried various solutions from Stack Overflow, like using relative and absolute CSS classes, setting bottom to 0 px, and adjusting margins. However, I'm still unsure how to achieve the desired layout. The goal is to keep the toolbar fixed at the top, the center portion filling the remaining space, and the footer fixed at the bottom. The toolbar and footer have fixed heights, while the center portion should adjust to the available space. Additionally, there's a fixed sidebar.


    <div className="container-fluid">
      <div className="container-fluid">
        <div className="row mt-2 mb-2 mr-2 ml-2 main">
          <div className="col-md-8">
            <nav>
              <div className="row mt-2 mb-2 mr-2 ml-2 nav">
                <div className="col-md-12">
                  <div className="ui buttons">
                    <button className="ui button mb-1 mt-1">
                      <i className="plus icon"></i>
                      Add Card
                    </button>
                    <div className="or mb-1 mt-1"></div>
                    <button className="ui positive button mb-1 mt-1">
                      <i className="sort amount down icon"></i>
                      Sort All
                    </button>
                  </div>
                </div>
              </div>
            </nav>

              <div className="row mt-2 mb-2 mr-2 ml-2 body">
                <div className="col-md-12">
                  <div className="card mt-2 mb-2">
                    <div className="card-body">
                      <p className="card-text">{getRandomNumber(0, 101)}</p>
                    </div>
                  </div>
                </div>
              </div>

            <footer>
              <div className="row mb-4 mr-2 ml-2">
                <div className="col-md-12">
                  <h3 className="text-center text-muted">Footer</h3>
                </div>
              </div>
            </footer>
          </div>
          <div className="col-md-4">
            <ul>
              <h6>React Coding Challenge Formatted Instructions:</h6>
              <li className="list-item">
                Create a responsive React application using either JavaScript or
                TypeScript.
              </li>
              <li className="list-item">
                The main portion of the application will contain a list of cards
                with a randomly generated number between 0-100 within each card.
              </li>
              <li className="list-item">
                The right pane has a fixed-width that remains attached to the
                right side when the user resizes the window. Once the browser
                width is small, the pane will be hidden.
              </li>
              <li className="list-item">
                The top pane is a fixed-heigth toolbar that has a button to add
                additional cards as well as a button to sort all the cards in
                ascending numerical order based on the number within each card.
              </li>
              <li className="list-item">
                The bottom pane is a fixed-heigth footer that just contains the
                text "footer".
              </li>
              <li className="list-item">
                The center pane is the card container. It starts out with zero
                cards. The user will click the "Add Card" button in the top
                toolbar to add a card in the center container.
              </li>
              <li className="list-item">
                The center pane has a vertical scrollbar that will become
                visible once enough cards are displayed. The user can use the
                scrollbar to scroll through all the added cards.
              </li>
              <li className="list-item">
                The cards are added vertically into rows which will wrap as
                needed. The amount of visible cards per row is dependant on the
                width of the browser.
              </li>
              <li className="list-item">
                Each card has a set pixel size of 300 pixels in width and 250
                pixels in heigth.
              </li>
              ...

For the JavaScript portion of the code:


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const App = () => {
  return (
    <div class="container-fluid">
      <div class="row mt-2 mb-2 mr-2 ml-2 main">
        <div class="col-md-8">
          ...
          <div class="row mb-4 mr-2 ml-2 footer">
            <div class="col-md-12">
              <h3 class="text-center text-muted">
                Footer
              </h3>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <ul>
            <lh>React Coding Challenge Formatted Instructions:</lh>
            <li class="list-item">Create a responsive React application using either JavaScript or TypeScript.</li>
            ...
          </ul>
        </div>
      </div>
    </div>
  );
};

Answer №1

Different Header And Footer Styles

Experience various Header and Footer styles with the following code snippets:

  • Sticky Header & Sticky Footer
  • Sticky Header & Fixed Footer
  • Fixed Header & Sticky Footer
  • Fixed Header & Fixed Footer

Delete cards by clicking on them to observe the behavior with fewer cards or resize the window to visualize.

Sticky Header & Sticky Footer

JavaScript code snippet
CSS code snippet
HTML code snippet

Sticky Header & Fixed Footer

JavaScript code snippet
CSS code snippet
HTML code snippet

Fixed Header & Sticky Footer

JavaScript code snippet
CSS code snippet
HTML code snippet

Fixed Header & Fixed Footer

JavaScript code snippet
CSS code snippet
HTML code snippet

Below is the solution to the updated question

JavaScript code snippet
CSS code snippet
HTML code snippet

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 simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

What is the best way to stop a select menu option from being highlighted once it has been clicked on?

Is there a way to prevent the highlighting of selected options in a <select> menu when a user makes a selection? <select id="my_select_menu"> <option id="1">Option 1</option> // I do not want this option to be highlighted ...

React's custom fetch hook falls short by one pace

After diving into the world of creating custom fetch hooks for both get and post data, I found myself facing a common issue - my hook-returned state variables seemed to always be one step behind due to the asynchronous behavior of useState. Here is the cus ...

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

What is causing the unexpected impact of the "Product Quick View" JavaScript plugin on divs that are not being activated by user interaction?

As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

The dynamic duo of JavaScript and HTML forms are like peanut

My HTML form has some validation functions, but I'm running into an issue where some functions can access the form while others cannot! Here is the form code: <form id="contactForm" action="javascript:submitForm()" method="post"> <table ...

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...

Tips on utilizing the Material Ui Select input property?

Trying to understand why material-ui's InputBase is functional while regular HTML input is not. The documentation defines the input prop as follows: An Input element; does not have to be a material-ui specific Input. Successful example: import Sele ...

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

What is the best way to implement a proxy in a React build?

this is the specific api request I need to make http://localhost:3000/api/getUserName however, I am using a proxy in my package.json. After attempting to build the application, the call now goes to http://localhost:5000/api/getUserName Since I am ...

Utilizing Rollup to Bundle a Collection of React Components

I am diving into the world of bundling as I update a compact React component library internally powered by Rollup. Current Status Currently, all components are bundled into a single index.js file. When I import one or more... import { Button, Input } fr ...

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

Stacking images with CSS styling

I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

What could be the reason for my Vue application failing to load, even though the mounted event is being triggered

Here's an interesting scenario. The code functions correctly in CodePen and even in Stack Overflow's code renderer, but it fails to work on my GitHub Pages site. No errors are triggered, and the console logs for the created and mounted events ex ...

Bootstrap 4 cards continue to resize instead of adapting to the constraints of the designated space

I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code: <div class="row row-container"> <div class=& ...

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

Interactive Infographics in HTML5 format

Currently, I am unable to find any examples on how to accomplish a specific task mentioned in the following link. If you have a tutorial with step-by-step instructions or a code project available, it would greatly assist me. Link: Evolution of WEB ...

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...