When utilizing CSS Paged Media, a div element can be forced to break onto the next

Seeking your expertise,

I'm encountering an issue where the div's bottom border breaks onto the next page when a print preview is initiated in Internet Explorer 11:

In any case, I would greatly appreciate it if we could achieve a 1px border around the entire page (letter-sized, 8.5inches x 11.0inches) with some margins applied.

https://i.sstatic.net/gZL0d.png https://i.sstatic.net/h8ORz.png

Here's the relevant HTML and CSS code:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
@page {
    margin: 0.25in;
}
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table td {
    padding: 0;
}
</style>

</head>

<body>


<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
    <tr>
        <td>File Number:</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>


</body>

</html>

Answer №1

The issue at hand relates to the CSS box model. By default, borders are applied to the outer dimensions of the width/height, requiring a change in box-sizing to border box in order to position the borders on the inner boundaries of the width/height:

<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...

If the box-sizing is not adjusted to border-box, the div will actually extend by 2 pixels (1px for top border, 1px for bottom border) beyond its intended 100% height measurement, leading to content overflow onto a second page.

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

Looking to add a bulleted list to an HTML document with PHP?

I have integrated a PHP script within an HTML list element that enables users to edit the HTML element directly from the webpage if they enter the correct password via the variable ?pw = "password". Now, I am looking to allow users to add new list items ...

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

Creating a JavaScript function to display an object on top of a background image

I am in the process of designing a program that mimics Guitar Hero, where red circles appear over an image of a violin when specific key presses are detected. However, I am encountering difficulties with making the circles appear on top of the image even ...

What are the steps to reposition a label in native script with CSS?

I've been attempting to adjust the positioning of the label on the page, but no matter what I do it refuses to budge. Here is the code snippet in question: <Label text="Hello" class="hello" @tap='hello' /> With the following CSS sty ...

Leverage autoplay feature in HTML5 audio to start streaming your favorite radio station

I am currently facing an issue with trying to automatically launch a webradio on my HTML file. Despite using autoplay, the radio fails to load data in time causing the autoplay feature to be blocked. To tackle this problem, I implemented a setTimeout funct ...

Troubleshooting problems with Z-Index div hover overlay on [windows] and Webkit browsers (Safari, Opera, etc)

Note: This issue is specific to Windows Webkit and does not affect Macs I am attempting to create a grid with fixed-size cells containing background images. When hovered over, the background image changes and the cell's height increases, overlaying t ...

How can I display the default value in a jQuery radio button when it changes?

I recently started developing and I encountered an issue with a change event function for two radio buttons that have the same name and id but different values. When I trigger the change event, the default value related content doesn't appear until a ...

Is there a way to display the output of a JavaScript function in an HTML document?

My current project involves coding a tool that allows users to calculate the area of a rectangle. The user is prompted to input the height and width, and then the website should display these values along with the calculated area in a table format. So far, ...

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

Intrigued by the prospect of making HTML elements vanish or smoothly glide along with the content without obstructing it

I'm a beginner in coding and I want to make my website impressive. Right now, I have an HTML embedded element called "On this Page" that I would like to disappear when the user scrolls down the page. I've managed to position the element on the ...

JavaScript allows you to create matrices from squares

Hey everyone, I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's no ...

Alignment in Bootstrap 4: How to Align Elements Both Vertically and Hor

I am having trouble aligning the content both horizontally and vertically. Does anyone have any suggestions for the best approach to achieve this? <div class="container"> <div class="row"> <div class="col-md-4"> <im ...

"Seeking assistance with character encoding and optimizing code - can anybody help me

Hello everyone, I am new to Stack Overflow and I have encountered a problem that I hope you can help me with. Due to a recent arm injury, I need to find a quicker way to copy and paste email templates into an email editor in Siebel. However, I am strugglin ...

Fetching Information from Firebase and Populating Dropdown Menus on a Website

Displayed below is a code snippet from a .JSON file stored in a Firebase database. "questionnaires" : { "ORANGE" : { "location" : "ny", "major" : { "engineering" : { "ECE" : { "3rd sem" : { "2018 ...

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

When focusing on a textfield, the background remains the same color and does not change

Hey there! I have a question about changing background color when clicking on a text field. I followed the code below but it doesn't seem to be working for me. Can someone help me figure out what's wrong? //jQuery $(function() { $('inp ...

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

How can I create a Bootstrap button with a custom href link in my code

I have created a button, is it possible to add an "href" link to this code? My link isn't working! <button class="buttoncostum"> <a href="http://example.com/"><span class="glyphicon glyphicon-th-list" style="color:white" aria-hidden=" ...

Easily toggle between two different Server Side Includes using jQuery or JavaScript

Having an issue with a static HTML page that utilizes server side includes. The SSI's HTML code contains a closing </head> tag and an opening tag. <-- SSI start blah blah blah </head> <body> --> Is there a method to swi ...

What is the best way to add elements to a blank 2D array in Javascript?

As I delve into the contents of a text file, I encounter rows separated by the string OUT_ and columns delimited by \n My task involves filtering out arrays with less than 9 columns and without a % in the 6th column Once filtered, the goal is to alp ...