Printing the footer on a page in ASP.NET is essential for providing additional information

I need to print an HTML page with specific content. The content includes a div with some text to be printed. Additionally, I have a footer with a class of divFooter that contains more content.

<div>content to print</div>

The CSS for styling the footer is as follows:

<style type="text/css">
    @media screen
    {
        div.divFooter
        {
            display: none;
        }
    }
    @media print
    {
        div.divFooter
        {
            position: fixed;
            bottom: 0;
        }
    }
</style>

In Internet Explorer and Firefox, the footer is aligned at the bottom, but it does not display correctly in the Chrome browser. Any suggestions on how to fix this issue?

asp.nethtmlcss

Answer №1

If you utilize the @media print tag, your footer will appear at the bottom in the print preview. To keep the footer at the bottom in the browser, include @media all.

<style type="text/css">
    @media screen
    {
        div.divFooter
        {
            display: none;
        }
    }
    @media all
    {
        div.divFooter
        {
            position: fixed;
            bottom: 0;
        }
    }
</style>

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

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...

cssreactjsmaterial-uireact-with-styles

Navigational menu on website communicates with embedded Tableau iFrame

I have successfully integrated a Tableau dashboard/worksheet into my website using an iframe. I want to create navigation on the parent site that allows users to interact directly with the embedded dashboard by switching between different views, instead ...

pythoncsstableau-apijss

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...

css

Unable to open file:/// on localhost in the browser

I have been working on a website that can display the folders and files on a client's machine in an HTML table. Everything was functioning correctly, but I encountered an issue with creating href links for files on the client's machine which were ...

pythonhtmllocalhosthrefinternet-explorer-11

The dropdown list box within the EditTemplate of a DataGrid does not utilize binding

I am struggling with binding the dropdownlist in the edit template of a grid view. I keep getting the error message "Additional information: DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Type'." Below ...

htmlasp.net

JavaScript tile mapping not rendering

<html> <head> <title>TileMap</title> <style> #canvas { outline: 1px solid #000; } </style> </head> <body> <canvas id="canvas" height="1000" width="1000"></canvas> <scr ...

javascripthtml

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template. Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks goo ...

htmlcsstwitter-bootstrap

Executing the main process function

One of the challenges I'm facing is calling a function from the main process in Javascript while a button is clicked in another file. Here is the code snippet: Main.js const electron = require( 'electron') const {app, BrowserWindow} = elec ...

javascripthtmlelectron

Scrolling the inner container in a CSS flexbox layout: tips and tricks

I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...

htmlcssflexbox

Retrieve user control method and attributes from a static page function

Recently, I encountered a situation where an ASP.NET user control was utilizing jQuery AJAX to call a method. This is the JavaScript code being used: $.ajax({ type: 'POST', url: 'Default.aspx/AdvertClick', data: '{"nam ...

c#asp.netjqueryajax

When the jquery.show() function is invoked, scrollbars are displayed on the screen

I am encountering an issue with a flydown menu that includes a scrollable div. The div is about 400 pixels in height, causing scrollbars to appear in the drop down menu. When I hover over it, I trigger the show method as follows: $("#flydown").show(); Al ...

jqueryhtmlcss

What is the best approach to transform an HTML textarea value into JSON format?

Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...

javascripthtmljsonnode.js

Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements: The layout must be in columns; The number of colu ...

htmlcss

Why do my padding and font size fail to match the height of my container?

When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someo ...

htmlcss

There seems to be an issue with the zebra striping in the rich:datatable component when using the rowClasses

I'm attempting to give my table a "zebra" color pattern for the rows, but it seems like the rowClasses attribute isn't functioning properly (edit: I don't see any colors applied to the table at all). Here is how I defined the styles: <s ...

cssrichfaceszebra-striping

Creating a Line Chart Using an HTML Table

I am a beginner when it comes to understanding charts and MVC. Currently, I am attempting to develop a line chart to represent tabular data in MVC. Below is a snippet of the sample data that I am working with: <div class="panel-body table-responsive"&g ...

jqueryhtmlchartslinechart

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

javascripthtmlarraysvue.jsvuejs2

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

Having trouble connecting with Socket.io. This is the server-side code: function chatserver(){ var express = require('express'), app = express(), server = require('http').createServer(app).listen(app.get('port'),function ...

javascripthtmlnode.jssocket.io

Tips for adjusting the size of your Navigation bar

I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...

htmlcss

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4