Web开发新手求助：背景图未占满宽度且出现底部滚动条

Hey there! Let's tackle those two layout problems you're dealing with. I've gone through your CSS and HTML, and here's what's causing the issues plus how to fix them:

1. Background Image Not Covering Full Width (Right Side Gap) #

The main culprit here is how box-sizing works combined with your padding on the #middle section. By default, elements use box-sizing: content-box, which means the padding gets added to the element's width—so your width:100% plus padding:60px makes the section wider than the viewport, creating that right-side gap. Also, your background image wasn't set to scale properly.

2. Unwanted Bottom Scrollbar #

This ties back to the box-sizing issue (elements overflowing the viewport horizontally) plus some invalid CSS values and default browser margins that add unexpected spacing.

Full Fixed CSS Code #

Here's the updated CSS with all fixes applied, plus comments explaining key changes:

/* Add this at the top to fix box-sizing globally (critical for layout!) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container{ 
  width:80%; 
  margin:auto; 
  overflow: hidden; 
}
a:hover{ color:yellow; }
#prof{ color:white; font-size: 1.2rem; /* Added unit—font-size needs px/rem/em! */ }
#bottom h3{ 
  color:black; 
  text-align: center; 
  font-weight: bold; /* Fixed font-weight (use keywords or numbers like 700, not 1.2) */
  background-color: coral; 
  padding: 10px 0; /* Added padding to prevent text touching edges */
}
.button-1:hover{ color:yellow; }
.button-1 { 
  background-color:white; 
  color: red; 
  font-weight: bold; /* Fixed invalid font-weight value */
  width:20%; 
  border:none; 
  border-radius: 15px; 
  padding: 8px 0; /* Added padding for better button size */
}
body{ 
  font-size: 16px; 
  line-height: 1.6; 
  font-family: sans-serif; 
  margin: 0; /* Clear default browser margin on body */
}
body a{ text-decoration:none; color:white; }

/*HEADER*/
header{ 
  background-color: #000000; 
  border-bottom: 3px red solid; 
  padding: 15px 0; /* Added padding to prevent header content touching edges */
}
header h1{ float: left; }
header nav{ float: right; margin-top: 10px; /* Adjusted margin for better alignment */ }
header a{ padding:0px 10px; font-size: 20px; }

/*MIDDLE SECTION*/
#middle{ 
  width:100%; 
  padding:60px; 
  margin:0px; 
  color: white; 
  text-align: center; 
  background: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat center center/cover; /* Updated to scale and center background */
  overflow: hidden; 
}
#title-1{ 
  background-color: black; 
  padding: 15px 0; /* Removed invalid negative padding */
  color:white; 
}
.container h3{ 
  float:left; 
  width:70%; 
  font-family: sans-serif; 
  font-size: 25px; 
  box-sizing: border-box; 
  margin-top: 10px; /* Added margin for vertical alignment */
}
.container .button-1{ 
  float:right; 
  width:30%; 
  font-family: sans-serif; 
  font-size: 20px; 
  margin-top:10px; /* Adjusted margin for better alignment */
}
.float{ 
  width:33.33%; /* Changed to 33.33% to fit 3 columns perfectly */
  float: left; /* Changed from right to left for natural flow */
  padding: 30px 20px; /* Increased horizontal padding for better spacing */
  text-align: center; 
  color: black; 
}
.float img{ width: 50% } /* Increased image size for better visibility */

@media(max-width:768px){ 
  header #prof, header nav, section .float{ 
    float: none; 
    width:100%; 
    display: block; 
    text-align: center; 
    margin: 10px 0; 
  }
  .container .button-1, .container h3{ 
    width: 100%; 
    float: none; 
    display: block; 
    text-align: center; 
  }
  .container .button-1{ 
    padding: 10px 0; 
    margin: 10px 0; 
  } 
}

Quick HTML Fix #

Your footer is currently outside the <body> tag—move it inside before the closing </body> tag to follow proper HTML structure:

<body>
  <!-- All your existing header, sections, etc. -->
  
  <footer id="bottom">
    <h3>Copyright &#169; 2020 </h3>
  </footer>
</body>
</html>

Key Fix Breakdown #

• Global box-sizing: border-box: Ensures padding/borders are included in an element's declared width, preventing overflow.
• Invalid CSS values fixed: Removed negative padding, added units to font-size, and corrected font-weight.
• Background image optimized: center center/cover makes the image scale to fill the section without distortion.
• Default margins cleared: Eliminates browser-default spacing on the body that caused unexpected gaps.
• Column alignment adjusted: Changed .float width to 33.33% to fit three columns perfectly in the container.

Test these changes in your browser—you should see a clean, full-width layout without any unwanted scrollbars or gaps!

内容的提问来源于stack exchange，提问作者WinTérMïst