我无法弄清楚为什么我的背景图片不想重复到页面底部。每次添加新项目时我都要增加高度。我已经尝试过做一个清晰且不同的位置属性，但没有任何接缝可以工作。这是我的CSS：
body {
background-color: lightGrey;
}
.wrapper {
background-image: url("../img/cork.png");
width: 1260px;
height: 100%;
margin: 0px auto;
padding: 0px;
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,1);
box-shadow: 0px 0px 15px rgba(0,0,0,1);
clear:both
}
.header {
margin: 0 auto;
width: 94%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
.header {
margin: 0 auto;
width: 94%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
padding: 0;
float: left;
}
.item {
width: 400px;
height: 400px;
float: left;
background-color: #fff9a6;
-webkit-box-shadow: 0px 10px 15px rgba(0,0,0,.5);
-moz-box-shadow: 0px 10px 15px rgba(0,0,0,.5);
box-shadow: 0px 10px 15px rgba(0,0,0,.5);
}
.itemTitle {
margin: 10px 0px 0px 10px;
padding: 0px;
font-weight: bold;
font-style: italic;
}
.itemDesc {
margin-left: 20px;
margin-right: 10px;
margin-bottom: 0px;
padding: 5px;
font-weight: regular;
}
.item img {
width: 350px;
margin: 10px 25px;
/* padding: 0px 0px 10px 10px;
*/}
.empty {
width: 353px;
height: 353px;
margin: auto;
text-align: center;
font-size: 25px;
font-weight: bold;
}
这是HTML
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>For Sale</title>
</head>
<body>
<div class="wrapper">
<div class="header">To have your item added, please click <a href="mailto:xxx@xxx.com?subject=Item for sale...&body=Item%20Name%3A%0ABrief%20Description%3A%0ASale%20Price%3A%0AWho%20To%20Contact%3A">HERE</a>
<br />Please attach any images to the email that you would like to appear on the listing.
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">Sectional Sofa - $400</p>
<p class="itemDesc">Sofa is a brown twill. Had 1.5yrs and is in great shape, no tears, rips or stains. Full dimensions are 23"H x 116.25"W x 61"D and weighs 250lb.
<br />If interested, contact Nick</p>
<img src="img/sofa.png" alt="sofa">
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">Antique Dining Room Table & Chairs - $500 for set</p>
<p class="itemDesc">Solid Mahogany Brandt Brass Claw Foot Drop Leaf Dining Table circa 1920 with (6) Chairs. Three of the chairs have needlepoint work. Table could stand to be refinished, but flaws give it character. Perfect for a formal dining room. Table top pads come with. If interested, contact Amy</p>
<p style="margin-left:10px; margin-bottom: 0px;padding: 0px; font-style: italic;">(click image for larger pic)</p>
<a href="img/amy.png" target="_blank">
<img src="img/amyThumb.png" alt="dining room table">
</a>
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">ProForm 345s CrossWalk Treadmill - $100</p>
<p class="itemDesc">Gently used treadmill – great for home use. Various workouts including cardio and fat burning. This is a great purchase if this is your first treadmill. Easy to use – just plug in and go! If interested, contact Amy</p>
<p style="margin-left:10px; margin-bottom: 0px;padding: 0px; font-style: italic;">(click image for larger pic)</p>
<a href="img/treadmill.png" target="_blank">
<img src="img/treadmillThumb.png" alt="dining room table">
</a>
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">1996 Nissan Pickup - $3000</p>
<p class="itemDesc">Sale 154,000 miles, 5 speed manual, A/C, CD player, bed liner, remoteless key entry (not a typo). This truck has provided me with 12 years and over 130,000 miles of reliable transportation. The price is firm and I wouldn’t mind keeping it as a second vehicle if I can’t find a buyer. If interested, contact John</p>
<img src="img/johnTruck.png" alt="John Truck">
</div>
</div>
<div class="container">
<div class="item">
<!-- <img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold"> -->
<p class="itemTitle">Gold’s Gym Stride Trainer Elliptical - $280</p>
<p class="itemDesc">Gently used elliptical, less than two years old. Set your own resistance level or choose from the six pre-set workouts. Displays time, distance, calories, pulse, speed, and RPM. Battery powered and easy to use. Contact Rachel if interested.</p>
<a href="img/rachel.png" target="_blank">
<img src="img/rachelThumb.png" alt="treadmill">
</a>
</div>
</div>
<div class="container">
<div class="item">
<!--<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">-->
<p class="itemTitle">Kenmore Washer & Whirlpool Dryer - $300 for the set</p>
<p class="itemDesc">White, large capacity washer and dryer. They both work great and are not very old. Both have various settings. Must be sold as a set. If interested, contact Rachel </p>
<a href="img/rachelWasher.png" target="_blank"><img src="img/rachelWasherThumb.png" alt="Alt Text"></a>
</div>
</div>
<div class="container">
<div class="item">
<!--<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">-->
<p class="itemTitle">Sectional Couch - $150</p>
<p class="itemDesc">Red, microsuede material. There are a few stains, but the couch could easily be reupholstered (I used throw pillows/blankets to hide the stains). Great for college student (apartment, dorm, small living room, etc.). About 5 feet long. Separates into two pieces for moving.</p>
<a href="img/rachelCouch.png" target="_blank"><img src="img/rachelCouchThumb.png" alt="Alt Text"></a>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
将float：left添加到.wrapper类
嵌套元素已浮动，因此未正确清除
答案 1 :(得分：1)
您是否尝试将背景设置为html而不是body？
聚苯乙烯。看一下本文的有效清算技巧 - css-tricks.com/snippets/css/clear-fix /