Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed.

I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bottom are styles from Bootstrap4. I understand that I need to use fixed constants in my HTML/Style code for this approach, is that the right way to go?

<body>
  <div>
    <div class="fixed-top" style="height: 50px; border: 2px solid black">
      Header
    </div>
    <div>
      <div style="height: 50px"></div>
      (1) The protection of natural persons in relation to the processing of personal data is a fundamental right. Article 8(1) of the Charter of Fundamental Rights of the European Union (the ‘Charter’) and Article 16(1) of the Treaty on the Functioning of
      the European Union (TFEU) provide that everyone has the right to the protection of personal data concerning him or her.
      <div style="height: 50px"></div>
    </div>
    <div class="fixed-bottom" style="height: 50px; border: 2px solid black">
      Footer
    </div>
  </div>
</body>

Answer №1

Instead of relying on Bootstrap classes, you can implement the following CSS to create fixed height headers and footers with absolute positioning.

    html body {
        height: 100%;
        overflow: hidden;
      }
      html body .container-fluid.body-content {
        position: absolute;
        top: 50px;
        bottom: 30px;
        right: 0;
        left: 0;
        overflow-y: auto;
      }
      fixed-header {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          background-color: #4C4;
          height: 50px;
      }
      fixed-bottom {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #4C4;
          height: 30px;
      }

 <div class="fixed-header">
      Header
    </div>
    <div class="container-fluid body-content">
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
    </div>
    <div class="fixed-bottom">
      Footer
    </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

Interactive carousel featuring responsive image zoom effect on hover

Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented: CSS .image-hoover { overflow: hidden; } .image-hoover img { -moz-transform: scale(1.02); -web ...

PHP: Showing the content of every div on the page

I am facing an issue with retrieving input values from multiple divs in the HTML code provided below. Specifically, I want to extract the Input values with the name LI_Dept as an array for each individual div when handling data in PHP. Is there a way to f ...

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...

Implementing JavaScript for showcasing weights

I've encountered a JavaScript function that modifies user preferences for weight units, allowing them to choose between metric and imperial measurements. When displaying weights on my page, I typically present them as follows: This is a brief explan ...

JavaScript and CSS animations offer dynamic and engaging ways to bring

I'm working on a div section and I want it to come down and rotate when a button is clicked. However, after moving to the bottom, it doesn't rotate as expected but instead returns to its initial position along the Y axis. How can I fix this issue ...

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

My media queries refuse to cooperate until I add the magical "!important" declaration

Utilizing Bootstrap 4 along with a custom CSS file on my website. Within the CSS file, I have included some media queries at the bottom: @media (max-width: 575px) { .address .contact { text-align: center; } } /* Small devices (tablets, 768px and ...

When the mouse leaves the area, I would like the iframe within the div to be refreshed

When you hover over the button on the right, a slide panel appears with an iframe. Each time this page loads, it has a different background. I want a new background to load every time there is a new hover, requiring a refresh of the div. How can I achieve ...

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: https://i.sstatic.net/FsHq5.png The problem lies in my inability to underline the selected optio ...

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

Vue's v-model functionality encounters issues when navigating back and forth in the browsing history

Below is a sample of code from the local index.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">< ...

Ensure that the element remains on a single line, even if it needs to be positioned below

I am dealing with a row of horizontal divs that I want to keep together, but a floating element on the right side is causing them to break into two lines when it overlaps. My goal is to have the line of divs move below the float, similar to how the word "H ...

Implementing the onEnded event handler for an HTML video element

I recently experimented with the video tag using flowplayer and I wanted to share my code below: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script> <!-- 2. flowplayer --> <script src="http://releas ...

Is it advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

Combining Two Tables Using jQuery

I am currently attempting to combine two tables into one using jQuery in the following manner: var table = document.createElement("table"); table.id = "mergedTable"; $("#mergedTable > tbody:last") .append($("#csvInfoTable2 > tbody").html()) ...

Exploring the World of Bootstrap 4 Cards

Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, alo ...

Strategies for properly formatting a second line indent on lists with background bullets

I've set up an unordered list with bullet points created using FontAwesome, along with a background and border radius for added style. My issue is that I want the second line of text to align below the first one rather than under the bullet point. ...

"Implementing unique typefaces on a static website hosted on AWS

I've been attempting to incorporate a unique font into my CSS class using font-face. I have experimented with both .otf and .ttf file formats, uploading the custom font files to an S3 bucket. I made sure to grant public permissions to the font files a ...

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Imagine you have an iframe on your webpage: <iframe style="border-radius:15px;" width="190" height="450" frameborder="0" scrolling="no" marginheight="5" marginwidth="10" src="../img/interactive_map/interactive_sverige.htm"> </iframe> ...