在 1100px 的断点处，我告诉 CSS 删除保存图像的 div。但是，其余内容不会移动，并且有很大的空白区域(就好像 div 仍然在那里一样)。我想要发生的就是将内容全部转移并填充页面。此错误发生在这个单一页面上，并且特定于这个断点。
/*minimised browser winddow */
@media(max-width: 1100px) {
header #branding,
header nav,
header nav li,
#newsletter form,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
aside {
display: none;
}
#newsletter h1 {
display: none;
}
}
/* 768 tablet */
@media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
display: none;
}
#showcase h1 {
font-size: 275%;
}
#showcase p {
font-size: 100%;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
.col-25,
.col-75 {
width: 100%;
margin-top: 0;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels mobile phone */
@media screen and (max-width: 480px) {
header #branding,
header nav,
header nav li {
text-align: center;
font-size: 100%
}
header ul {
padding: 10px;
font-size: 100%;
}<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active"><a href="home9.html">Home</a></li>
<li><a href="about9.html">About</a></li>
<li><a href="services9.html">Services</a></li>
<li><a href="coverage9.html">Coverage</a></li>
<li><a href="contact9.html">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Our Story</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>
<div class="dark">
<h3>What We Offer</h3>
<ul>
<li>Plumbing and Heating Services</li>
<li>Gas Safe Registered: 202542</li>
<li>VAT Registered</li>
<li>25 years of expertise</li>
<li>Plumbing and Heating Services</li>
<li>Heating Engineer Qualified</li>
<li>VAT Registered</li>
<li>100% Satisfaction Garauntee</li>
</ul>
</article>
<aside id="sidebar">
<div class="dark">
<h3>Satisfaction Garauntee</h3>
<p>Reputation matters. 98% of our customer would reccomend us to a friend.</p>
<a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="cat.png" alt="checkatradelogo"></a>
</div>
</aside>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
<p>Registered in England No. 4364232</p>
</div>
</footer>最佳答案
我认为在 @media css 中将容器类设置为 width:100% 将解决您的问题。
关于javascript - 断点在内容中留下空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47459271/