What is the best way to create a scrollable panel that spans the entire screen and stops just at the footer in a mobile interface using responsive design?

I am working on optimizing my result pages for mobile devices to ensure they are responsive across all screen sizes. However, I am struggling with making the scrollable panel fill the screen down to the footer consistently on all mobile devices. Setting a fixed height using pixels or viewport units doesn't provide a responsive solution, and using a percentage value prevents the panel from being scrollable. Any suggestions on how to achieve this?

Below is the code snippet:

CSS

.list_mobile {
  .result {
    height: border-box;
  }
  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 5vh;
    background: skyblue;
    color: black;
  }
}

.res_mobile {
  height: 57vh;
  overflow: scroll;
  overflow-x: hidden;
}

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Results</span>
          </h4>
        </div>
          <div class="panel-collapse collapse in">
            <!-- content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row list_mobile">
  <footer class="footer">
    <p>Number of results: 55 </p>
  </footer>
</div>

Answer №1

Update the .footer class Style

.res_mobile {
  height: 57vh;
  overflow: scroll;
  overflow-x: hidden;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: blue; /* Updated color */
   color: white;
   text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span>Results</span>
          </h4>
        </div>
        <div class="panel-collapse collapse in">
          <!-- content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row list_mobile">
  <footer class="footer">
    <p>number of results : 55 </p>
  </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

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

EventSource using HTTP Authorization Header for Secure Server Sent Events

Trying to add an Authorization header to an HTML5 EventSource, but struggling due to lack of documentation with Server Sent Events. Currently considering passing authorization data in the URL, although not a preferred method. Utilizing AngularJS and inter ...

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

Step-by-step guide on eliminating the modal post-validation

Newbie in reactjs looking for help with modal validation issue. Goal: Press submit button inside modal, validate, then close the modal. Want to reuse modal for another row. Problem: I'm having trouble making the function work for a new row after ...

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

Emphasize a specific line of text within a <div> with a highlighting effect

I'm looking to achieve a similar effect as demonstrated in this fiddle As per StackOverflow guidelines, I understand that when linking to jsfiddle.net, it's required to provide some code. Below is the main function from the mentioned link, but f ...

Tips for sending all form elements via ajax without explicitly mentioning their names

I'm developing an application with a dynamic form generation feature. When a button is clicked, I need to send all the form elements to another page using Ajax. The challenge is that since the form is generated dynamically, I am unable to specify elem ...

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

Sending Profile Picture and Description to PHP using AJAX and jQuery

I have been struggling to upload user images via AJAX to a PHP database. Despite trying various tutorials and examples, nothing seems to work with my code. The codes function properly without AJAX, but I need the upload process to be seamless for users by ...

Utilizing Ajax to fetch a div element from a web page

Hey there! I have a link set up that loads a page into a specific div ID, which is #ey_4col3. The issue I'm facing is that it loads the entire page along with all its contents, but what I really want to load from that page is just the content within ...

Looking to ensure my HTML page is optimized for mobile devices

Struggling to create a responsive layout? I've added the meta viewport tag, but still can't get it right. Maybe we can try zooming out based on screen dimensions to prevent the use of a horizontal scrollbar. <html> <head> <meta n ...

Leverage Bootstrap for your Vapor project

I'm just starting out in web development and have been struggling to find a definitive answer. Can Bootstrap be used in Vapor with Swift 3? ...

Aligning the stars with CSS

One of the components I have deals with a star rating system, and I thought it would be cool to use Font Awesome icons for half stars. Everything is working well except for the CSS styling aspect. While I managed to position some of the stars correctly by ...

Error loading skin on Gluon Project

In my project, I have created a unique custom control called ChoiceTextField along with its corresponding skin named ChoiceTextFieldSkin. protected Skin<?> createDefaultSkin() { return new ChoiceFieldSkin<T, ChoiceTextField<T>>(t ...

Do matrix filters in IE7 take into account white space sensitivity?

Utilizing CSS transformations, I am reverting to the following Matrix transform specifically for IE7 and IE8. filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand') This method function ...

Is it possible to adjust the font size in Bootstrap 4.6.2 to fit smaller fonts and bring back color to the tabs that were removed in the update?

While attempting to update Bootstrap from version 4.6.0 to 4.6.2 in a few codebases, I encountered some issues that prevented me from completing the upgrade successfully. The <small> tag and .small CSS class are now displaying larger than before. Ta ...

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

Using multiple selectors in JQuery and Javascript

I have a challenge where I need to execute different actions for specific divs. Here is the code snippet I currently have: $("#pending-cancel-1, #pending-cancel-2").click(function(){ Do something special for pending-cancel-1 and pending-cancel-2... }) ...

Switch back to default text style in case web fonts are taking too long to load?

Currently implementing Google web fonts in this manner: @font-face { font-family: "Vollkorn"; font-style: normal; font-weight: normal; src: local('Vollkorn Regular'), local('Vollkorn-Regular'), url('http://themes.googleuse ...