Блог

Главная - Вопросы по программированию - Масштабированный iframe занимает дополнительное пространство

Масштабированный iframe занимает дополнительное пространство

#html #css #iframe

Вопрос:

Я привязываю рейтинговую программу к своему сайту. Iframe отлично подходит для настольных компьютеров, но нуждается в некоторой помощи на мобильных устройствах. Я уменьшил размер содержимого, чтобы пользователь мог видеть все, но теперь у меня есть дополнительный интервал справа.

Это мой код:

 .quoteIframerapper{
  overflow: hidden;
  height:500px;
}
.quoteIframe{
  height: 100%;
}
@media only screen and (max-width: 800px) {
  .quoteIframerapper{
    width:153.84615385%;
  }
  .quoteIframe{
    -moz-transform: scale(0.65, 0.65); 
    -webkit-transform: scale(0.65, 0.65); 
    -o-transform: scale(0.65, 0.65);
    -ms-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65); 
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  }
} 
 <div class="quoteIframerapper">
   <iframe class="quoteIframe" frameBorder="0" allowfullscreen src="https://www.agentinsure.com/compare/auto-insurance-home-insurance/hillinsurance/quote.aspx"></iframe>
 </div>

Ответ №1:

Вы можете установить ширину .quoteIframe , чтобы сократить свободное пространство Вот так:

 .quoteIframerapper{
  overflow: hidden;
  height:500px;
}
.quoteIframe{
  height: 100%;
}
@media only screen and (max-width: 800px) {
  .quoteIframerapper{
    width:153.84615385%;
  }
  .quoteIframe{
    width: 48%;
    -moz-transform: scale(0.65, 0.65); 
    -webkit-transform: scale(0.65, 0.65); 
    -o-transform: scale(0.65, 0.65);
    -ms-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65); 
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  }
} 
 <div class="quoteIframerapper">
   <iframe class="quoteIframe" frameBorder="0" allowfullscreen src="https://www.agentinsure.com/compare/auto-insurance-home-insurance/hillinsurance/quote.aspx"></iframe>
 </div>

Комментарии:

1. Ну, содержимое iframe ограничено шириной 515 пикселей. Это всегда оставит некоторое пространство с правой стороны. Не знаете, чего именно вы здесь пытаетесь достичь? Вы хотите, чтобы iframe был такой же ширины, как ваша страница, или? Даже если вы сделаете его здесь во всю ширину, на вложенной странице будет сам пробел. Кроме того, где вы хотите, чтобы полоса прокрутки iframe была?

2. Взгляните на мобильное устройство, и вы поймете, что я имею в виду. simon.barretthillins.com

3. Вам нужно установить overflow: hidden значение родительского элемента iframe.

4. Ты уверен? Я установил его на том .quote-box , который является родителем родителя .quoteIframerapper , и он удаляет дополнительное пространство (через инспектор браузера). Дополнительное пространство поступает из iframe. Обычно фреймы iframe имеют ширину и высоту, и вы должны ограничить их контейнером, куда вы его помещаете, установив их ширину на 100% и добавив переполнение:скрыто; к родительскому

5. Рад, что помог. Да, вы можете избавиться от этой обертки, если это единственная причина, по которой вы ее поместили.

Метки: