Большой огромный разрыв под изображением героя, когда размер окна браузера изменяется до 1100 пикселей или меньше

html css responsive

103 просмотра

1 ответ

см. мой код: http://codepen.io/Chiz/pen/ZOPvvZ

Когда вы изменяете размер окна браузера до 1100px или меньше, в нижней части баннера героя и под ним появляется большой огромный зазор.

Я считаю, что это связано с фиксированной высотой 700 пикселей, которую я установил на баннере героя. Я попытался установить его в высоту: авто, чтобы высота автоматически вычислялась при изменении размера окна браузера, но это не работает.

Есть идеи? Я пытаюсь сделать это только с помощью CSS и не полагаться на загрузку или сетки / flexbox в данный момент.

* {
  box-sizing: border-box;
  font-family: "Times New Roman", serif;
}

body {
  position: relative;
  height: 100%;
}

.main-container {
  min-height: 100%;
  margin-bottom: -3rem;
}

.main-container:after {
  content: "";
  display: block;
}

section {
  width: 100%;
}

.hero-section {
  width: 100%;
  height: 700px;
  background: white url("https://i.imgsafe.org/5c6cf9094f.jpg") no-repeat scroll top center;
  background-size: cover;
}

.large-text {
  font-size: 7.5rem;
  font-weight: 500;
}

.gracekellytitle {
  margin-top: 0rem;
  position: absolute;
  top: 8rem;
  left: 10rem;
}

.gracekellybirthdeath {
  position: absolute;
  top: 15.5rem;
  left: 13rem;
}

.medium-text {
  font-size: 2.1rem;
  font-weight: 100;
}

.small-text {
  font-size: 1.2rem;
}

.generic-section {
  margin-top: 5rem;
}

.section-non-first {
  margin-top: 2rem;
}

.gracekelly-introtitle {
  font-size: 2.5rem;
  margin-top: 2.5rem;
}

.generic-content-text {
  font-size: 1.5rem;
  line-height: 2.2rem;
}

.generic-center-text {
  width: 70%;
  margin: 0 auto;
  max-width: 900px;
}

.generic-left-image {
  float: left;
  width: 30%;
  padding-left: 8%;
}

.generic-right-text {
  float: right;
  width: 70%;
  padding: 0 8% 0 8%;
  margin: 0;
}

.section-center {
  text-align: center;
}

footer {
  width: 100%;
  background-color: rgb(60, 60, 60);
  text-align: center;
  line-height: 3rem;
  color: white;
  margin-top: 5rem;
}

footer,
main-container:after {
  height: 3rem;
}


/* Media Queries */

@media only screen and (max-width:1600px) {
  .large-text {
    font-size: 6rem;
    font-weight: 500;
  }
  .medium-text {
    font-size: 1.8rem;
    font-weight: 500;
  }
  .gracekellytitle {
    margin-top: 0rem;
    position: absolute;
    top: 12rem;
    left: 10rem;
  }
  .gracekellybirthdeath {
    position: absolute;
    top: 17.7rem;
    left: 12rem;
  }
}

@media only screen and (max-width:1430px) {
  .large-text {
    font-size: 5rem;
    font-weight: 500;
  }
  .medium-text {
    font-size: 1.4rem;
    font-weight: 500;
  }
  .gracekellytitle {
    margin-top: 0rem;
    position: absolute;
    top: 12rem;
    left: 10rem;
  }
  .gracekellybirthdeath {
    position: absolute;
    top: 16.8rem;
    left: 12rem;
  }
}

@media only screen and (max-width:1100px)
{
  
    .hero-section {
  width: 100%;
  height:700px;
  background: white url("https://i.imgsafe.org/5c6cf9094f.jpg") no-repeat scroll top center;
  background-size: contain;
      border:1px solid red;
}
  
  .large-text {
    font-size: 5rem;
    font-weight: 500;
  }
  .medium-text {
    font-size: 1.4rem;
    font-weight: 500;
  }
  .gracekellytitle {
    margin-top: 0rem;
    position: absolute;
    top: 7rem;
    left: 8rem;
  }
  .gracekellybirthdeath {
    position: absolute;
    top: 11.7rem;
    left: 10rem;
  }
  @media only screen and (max-width:900px) {
    .large-text {
      font-size: 5rem;
      font-weight: 500;
    }
    .medium-text {
      font-size: 1.4rem;
      font-weight: 500;
    }
    .gracekellytitle {
      margin-top: 0rem;
      position: absolute;
      top: 7rem;
      left: 8rem;
    }
    .gracekellybirthdeath {
      position: absolute;
      top: 11.7rem;
      left: 10rem;
    }
    .detailssection {
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .generic-left-image {
      padding:0;
      width: 100%;
      float:none;
      margin-top:3rem;
    }
    .generic-right-text {
      width: 80%;
      max-width:850px;
      float:none;
      margin:3rem auto 0 auto;
    }
  }
}
<div class="main-container">

<!--hero banner section-->
<section class="hero-section">
  <h1 class="large-text gracekellytitle">Grace Kelly</h1>
  <h2 class="medium-text gracekellybirthdeath">12 Nov 1929 – 14 Sep 1982</h2>
</section>


<!-- intro section -->
<section class="generic-section section-center section-non-first">
  <img src="https://i.imgsafe.org/5d186cfb14.png" alt="" />
  <h2 class="gracekelly-introtitle">Grace Kelly - Her Serene Highness Grace of Monaco</h2>
  <p class="generic-center-text generic-content-text">Grace Patricia Kelly (November 12, 1929 – September 14, 1982) was an American actress who, after marrying Prince Rainier III in April 1956, became Princess of Monaco.<br /><br />After embarking on an acting career in 1950, at the age of 20, Kelly appeared in New York City theatrical productions and more than 40 episodes of live drama productions broadcast during the early 1950s Golden Age of Television. In October 1953, she gained stardom from her performance in the film Mogambo. </p>
</section>


<!-- details section -->
<section class="detailssection section-non-first">
  <img class="generic-left-image" src="https://i.imgsafe.org/5d79d5ef25.jpg" alt="" />
  <p class="generic-right-text generic-content-text">Tragedy struck on September 14, 1982, when Princess Grace and her younger daughter was driving along the steep cliffs of the Côte d'Azur region of southern France. She suffered a stroke and lost control of the vehicle, which spun off the cliff's edge and plunged down a 45-foot embankment. Mother and daughter were rushed to a hospital where Princess Grace spent 24 hours in a coma before passing away at the age of 52. Princess Stéphanie survived with minor injuries.<br /><br />

Grace Kelly remained in the public eye for most of her life. Her on-screen beauty, self-confidence and mystery enchanted the world, and her serenity and poise as Princess Consort piqued the media's attention. Of this attention, she remarked with typical humor and grace, "The freedom of the press works in such a way that there is not much freedom from it." Kelly's very public life is set to be portrayed by Nicole Kidman in the film Grace of Monaco (2014).</p>
</section>

<br style="clear:both;" />

<!-- footer section -->
<footer>Copyright © 2016 Nikar</footer>

</div>

Автор: Illo Yonex Illo Источник Размещён: 08.11.2019 10:58

Ответы (1)


1 плюс

возиться с этим, я изменил высоту: 450px и размер фона: обложка

  @media only screen and (max-width:1100px) {
  .hero-section {
    width: 100%;
    height: 450px;
    background: white url("https://i.imgsafe.org/5c6cf9094f.jpg") no-repeat scroll top center;
    background-size: cover;
    border: 1px solid red;
  }
Автор: Jon Размещён: 20.08.2016 06:46
Вопросы из категории :
32x32