Tips for creating a static header div with a fixed size and a scrollable body

Check out the code snippet below as a reference:
<div class="main">
<div class="header">
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
</div>
<div class="footer">
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
</div>
</div>

css:
.header{
  overflow: hidden;
}
.footer{
  overflow-y: scroll;
}
.main{
  overflow-y:hidden;
}

JSFiddle I have encountered a scenario where the size of my parent div is unknown, it is written in an iframe and I am inserting an angular template into the iframe. I have managed to fix the header, but I'm having trouble making it scrollable. To make it scrollable, I would need to provide a fixed height for the div, which is not possible due to...

htmlcssangularflexboxbootstrap-4

Answer №1

Implemented Infinite Scroll functionality by utilizing the InfiniteScrollModule from NPM.

Utilized the ngx-infinite-scroll library by importing { InfiniteScrollModule }.

Additionally, incorporated CSS to enforce a fixed body layout.

For example:

.modal{display: block !important; }

.modal-header .close{margin-top:0px;}

.modal-dialog{ overflow-y: initial !important}

.modal-body{ height: 20rem; overflow-y: auto;}

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

Access a PDF document in a new tab and save it with a specific file name using Angular

I am facing a challenge in Angular where I want to open a PDF file in a new tab and enable the user to download it with a specific name (Example.pdf). The current code successfully downloads the PDF but does not open a new tab (target=_blank is ineffecti ...

angular

Leveraging PHP to construct a TABLE based on JSON data

Recently, I delved into learning PHP and successfully retrieved the JSON data I needed. However, I hit a roadblock when attempting to construct a table using this data. Despite my trial-and-error approach, I find myself stuck at this point. The current st ...

phphtmljson

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

function toggleDivs() { var container = document.querySelector(".container"); var top = document.querySelector(".top"); var bottom = document.querySelector(".bottom"); if (container.style.flexDirection === "column") { container.style.flexDirec ...

javascripthtmlcss

Using API data to dynamically set the background image in Angular 7

I am currently facing an issue with setting background images for cards that are populated with data from an API. Each card pulls specific information and I would like to use an image associated with that data as the background image for each card. <di ...

angular

How do I determine in Angular (2+) when all child components have been initialized from the parent component?

Is there a lifecycle hook named "ngAfterAllChildrenInit" that can be used because ngAfterViewInit is called before the ngOninit of the children? I am currently trying to find a solution that avoids using setTimeOut or emitting events from all of the child ...

angularchildrenlifecycle-hook

Ways to determine the number of overlapping elements and adjust their widths

My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and the ...

htmlcssbootstrap-4flexbox

Inserting a cell into a duplicated table while keeping the original table intact

I am looking to insert a new TD into a cloned table so that it exists only in the cloned version and not in the original one. This way, users won't accidentally remove the original table leaving nothing to be cloned :) Currently represented as follow ...

jqueryhtml

The append method is not available for a div element

this is my unique code snippet for (i = 0 ; i< number ; i++){ var iDiv = document.createElement('div'); iDiv.innerHTML = "<label for=\"timeslot\" class=\"p-label-required\">Time Slot</label>" iDiv.i ...

javascriptjqueryhtml

Is it possible to postpone the initiation of an Angular application until a promise is fulfilled

At the moment, my code looks like this: new Loader().load().then(() => { platformBrowserDynamic().bootstrapModule(AppModule); }); The issue lies in the fact that I only need to delay the execution of ngOnInit and any route resolving until a prom ...

angular

What is the best way to make the first <p> tags bold within an array?

I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". https://i.sstatic.net/l0Ss6.png <div v-for="item in first" :key="item.id"> <p cl ...

cssvue.js

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

htmlcss

Having trouble getting your Raspberry Pi web server to display the background image?

Recently, I successfully set up a LAMP server on my raspberrypi which was quite exciting. One of the first things I did was configure an FTP server to transfer webpage files to the Pi. I managed to create a basic form of the final webpage and transferred i ...

htmlcsswebwebserver

The flexibility of adjusting the percentage in the ng-circle-progress feature

Currently, I am utilizing ng-cycle-progress in my Angular progress. Here is the HTML code: <circle-progress [percent]="score" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrok ...

angulartypescript

Automatically adjusting input box size and position in real-time

I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...

javascriptjqueryhtmlcss

The Google map is failing to load on the webpage

My id="ieatmaps" is set up to call the googlemaps.js, but for some reason, it's not displaying correctly. I must be missing something. function initMap() { var map = new google.maps.Map(document.getElementById('ieatmaps'), { c ...

javascripthtmlgoogle-maps

Change values within nested observables

fetchingData() { return this.http.get(environment.remoteUrl + '/client').pipe(pluck('rows'), map((item: any) => item.doc)); } The data is structured like this: { rows: [ {x: 123, doc: {a: 2}}, {x:222, doc: {a: ...

angularobservablerxjs6

When the Chrome Dev Tools are activated, the responsive website malfunctions

As I work on designing a responsive website, I've encountered an issue with media queries. When I set the breakpoint to min-width: 320px in Chrome dev tools, all of my CSS styles disappear. The same problem occurs when I zoom the window size to 150%, ...

css

Obtaining the data value from a style applied to a div element in an E-commerce platform like MyShop

I have recently started using MyShop for my online store at www.myshop.com. The programming language they use is quite different from what I am used to. For example, the total price in the basket.html script is displayed using the following code: <spa ...

javascriptjqueryhtmlcsse-commerce

Utilizing selected Bootstrap dropdown option for extracting value

I'm currently learning about development and am trying to create a bootstrap dropdown with 3 different background image options. My goal is to change the background based on the selected option from the dropdown. However, I am struggling to figure out ...

jquerycsstwitter-bootstrap

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter