如何使用HTML、CSS和JavaScript实现用户自定义尺寸的Div铺满1920×1080分辨率屏幕？

Got it, let's work through how to fill your screen (including the specified 1920×1080 resolution) with divs of a user-specified size. The original code has a few quirks we'll fix to get this working smoothly—like handling screen dimensions correctly, applying styles properly, and avoiding layout gaps.

Core Approach #

Here's the plan to make this happen:

• Capture the user's desired div height and width
• Calculate how many divs fit horizontally and vertically across the screen
• Generate the exact number of divs needed
• Apply the custom size to each div
• Ensure no default browser spacing breaks the full-screen layout

Step 1: HTML Structure #

We'll use a dedicated container to hold all our divs, plus input fields and a trigger button. Adding input validation (like min="1") prevents invalid entries upfront:

<input type="number" placeholder="Enter div height (px)" id="div_height" min="1" />
<input type="number" placeholder="Enter div width (px)" id="div_width" min="1" />
<button onclick="fillScreenWithDivs()">Fill Screen</button>
<div id="container"></div>

Step 2: CSS Styling #

We need to reset default browser styles to avoid gaps between divs, and ensure our divs align correctly:

/* Reset default margins/paddings to eliminate layout gaps */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden; /* Hide scrollbars if divs slightly overflow the screen */
}

.screen-div {
  background-color: red;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  border: solid 1px #000; /* Explicit border width for clarity */
  display: inline-block;
  vertical-align: top; /* Align divs perfectly without extra vertical space */
}

• box-sizing: border-box ensures padding/borders don't add to the div's specified size (so a 200px div stays 200px even with borders).
• overflow: hidden stops unwanted scrollbars if our div count rounds up to cover the full screen.

Step 3: JavaScript Logic #

This is where we calculate, generate, and style the divs. We'll fix the original code's issues with screen dimension handling and style application:

function fillScreenWithDivs() {
  // Get and validate user input
  const divHeight = parseInt(document.getElementById('div_height').value);
  const divWidth = parseInt(document.getElementById('div_width').value);

  if (isNaN(divHeight) || isNaN(divWidth) || divHeight <= 0 || divWidth <= 0) {
    alert('Please enter valid positive numbers for height and width!');
    return;
  }

  const container = document.getElementById('container');
  container.innerHTML = ''; // Clear existing divs before generating new ones

  // Use window dimensions for browser-visible area, or hardcode 1080/1920 for exact screen size
  const screenHeight = window.innerHeight; // Replace with 1080 for fixed 1920x1080
  const screenWidth = window.innerWidth; // Replace with 1920 for fixed 1920x1080

  // Calculate how many divs fit (round up to cover the full screen)
  const totalColumns = Math.ceil(screenWidth / divWidth);
  const totalRows = Math.ceil(screenHeight / divHeight);

  // Generate each div and add to the container
  for (let row = 0; row < totalRows; row++) {
    for (let col = 0; col < totalColumns; col++) {
      const newDiv = document.createElement('div');
      newDiv.classList.add('screen-div');
      newDiv.style.height = `${divHeight}px`;
      newDiv.style.width = `${divWidth}px`;
      container.appendChild(newDiv);
    }
    // Add a line break to wrap divs into the next row
    container.appendChild(document.createElement('br'));
  }
}

• Input Validation: We check for non-numeric or invalid values to avoid errors.
• Screen Dimensions: window.innerHeight/window.innerWidth gives the visible area of the browser. If you want to target exactly 1920×1080 regardless of the browser window, replace these with 1080 and 1920.
• Div Calculation: Math.ceil ensures we cover the entire screen even if the div size doesn't divide perfectly into the screen dimensions.
• Clean Generation: Using createElement is more reliable than concatenating HTML strings, and we clear the container each time the button is clicked.

Extra Tips #

• If you want to remove the slight overflow from rounding, you can adjust the last row/column of divs to fit exactly, but for most cases, overflow: hidden is a simple fix.
• Tweak the CSS (background color, shadow, border) to match your design preferences.

内容的提问来源于stack exchange，提问作者Tec Mania