断点在内容中留下空白

时间：2017-11-23 15:51:09

标签： javascript html css mobile breakpoints

在我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 &copy; 2017</p>
      <p>Registered in England No. 4364232</p>
    </div>
  </footer>

2 个答案:

答案 0 :(得分：0)

我认为在@media css中设置宽度为100％的容器类将解决您的问题。

答案 1 :(得分：0)

有可能通过两种方式使div居中（在您的情况下，“我们提供什么”块）

position:relative

的中心区块 
#main-col{
    position:relative;
    left:15%;    //This can differ, and you can keep whatever you see it's best
}

增加该特定区块的min-width 

#main-col{
    min-width: 100%;   //Remember, you need to force the width, 
                       //so width:100% won't work here. Hence min-width
}


  body {
  font: 100%/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: white;
}


/* Style the list 'container'  */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */

ul.topnav li {
  float: left;
}


/* style the links  */

ul.topnav li a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 100%;
}


/* hover */

ul.topnav li a:hover {
  color: gold;
}


/* Hide the icon initially  */

ul.topnav li.icon {
  display: none;
}


/* Global */

.container {
  width: 70%;
  margin: auto;
  overflow: hidden;
  /* Allows the burger nav and branding to sit on the same line */
}

a {
  text-decoration: none;
  text-shadow: 50px;
  color: black;
}

ul {
  margin: 0;
  padding: 0;
}

.subscribe {
  height: 38px;
  background: gold;
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
}

.dark {
  padding: 25px;
  background: #35424a;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}

.maps {
  position: relative;
  padding-bottom: 75%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
}

.maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}


/* Header **/

header {
  background: #35424a;
  color: white;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: gold 5px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight {
  color: gold;
}

header a:hover {
  color: gold;
}

h3 .bronze {
  color: #cc6633;
}

h3 .silver {
  color: silver;
}

h3 .gold {
  color: gold;
}

img.catsmall {
  width: 90%;
  height: auto;
}


/* Showcase */

#showcase {
  min-height: 350px;
}

#showcase h1 {
  margin-top: 50px;
  font-size: 500%;
  margin-bottom: 10px;
  text-align: center;
}

#showcase h2 {
  margin-bottom: 10px;
  text-align: center;
}

#showcase p {
  font-size: 120%;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: #ffffff;
  background: #35424a
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type="email"] {
  padding: 4px;
  height: 26px;
  width: 250px;
}


/* Sidebar */

aside#sidebar {
  float: right;
  width: 25%;
  margin-top: 10px;
}

section#contactus .quote input,
section#contactus .quote textarea {
  width: 30%;
  padding: 5px;
}


/* Main-col */

article#main-col {
  float: left;
  width: 70%;
}


/* Imagery */

#imagery {
  margin-top: 2%;
  margin-bottom: 2%;
}

#imagery .box {
  float: right;
  text-align: center;
  width: 30%;
  padding: 10px;
}

#imagery .box i {
  font-size: 800%;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}

.column img {
  margin-top: 12px;
  width: 100%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container .visuals {
  float: right;
}

.container .callus {
  float: right
}

.fa-phone {
  color: gold;
}


/* Services */

input[type=text],
select,
textarea {
  width: 60%;
  padding: 12px;
  border: 1px box-sizing: border-box;
  resize: vertical;
}


/* Floating column for labels: 25% width */

.col-25 {
  float: left;
  width: 30%;
  margin-top: 10px;
}


/* Floating column for inputs: 75% width */

.col-75 {
  float: left;
  width: 70%;
  margin-top: 10px;
}

footer {
  padding: 20px;
  margin-top: 20px;
  color: black;
  background-color: gold;
  text-align: center;
}


/*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;
  }
  #main-col {
    min-width: 100%;
  }
}


/* 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%;
  }
  /* CSS reset */
  {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  HTML5 display-role reset for older browsers article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
    background-image: url("bg.jpg");
    background-size: cover;
    background-size: contain;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
<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="https://i.pinimg.com/736x/d5/7a/e1/d57ae1e0abaa478e79388007b6d6dd09--woman-face-woman-style.jpg" alt="checkatradelogo"></a>
        </div>
      </aside>
      </div>
  </section>

  <footer>
    <div>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
      <p>Registered in England No. 4364232</p>
    </div>
  </footer>

相关问题
最新问题