Блог

Главная - Вопросы по программированию - Высота вывода скрипта несогласованна

Высота вывода скрипта несогласованна

#javascript #css #iframe

Вопрос:

У меня есть набор CSS, привязанный к выпадающему меню, чтобы выбрать, какой код запускать скрипт, выполняющий iFrame.

Селектор работает. Однако некоторые из выбранных элементов не имеют полной высоты на результирующем дисплее. Как мне получить правильную высоту для всех выбранных элементов?

 <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<script>
$(document).on('change', '.div-toggle', function() {
 var target = $(this).data('target');
 var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
  });
$(document).ready(function(){
$('.div-toggle').trigger('change');
});

</script>

<style type="text/css">
.hide {
  display: none;
}
</style>
<select class="div-toggle" data-target=".my-info-1">
<option value="29509eadce1204a5fd9ed01b44b52524a71807d7" data-show=".Charlotte">Charlotte</option>
<option value="9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0" data-show=".Atlanta">Atlanta</option>
<option value="4cb0b97fa319d1c6738290b1baa5c37d648fb130" data-show=".Baltimore">Baltimore</option>
<option value="a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558" data-show=".Columbia">Columbia</option> 
<option value="ec69c0c76f75fe97907f93a519d0843893525105" data-show=".Dallas">Dallas</option> 
<option value="9c60103c131ed39cdd0e865a62a8792b2c22c506" data-show=".Houston">Houston</option>      
<option value="b2a9f207b4441fa73f4a832eceaaed4cf62db0cc" data-show=".Indianapolis">Indianapolis</option>      
<option value="e75ca6fe26fedac7654a45a9e11a85d94a021844" data-show=".Jacksonville">Jacksonville</option>      
<option value="39e75daa82e75e724b93d86f39107515241a040c" data-show=".Las Vegas">Las Vegas</option>      
<option value="a9d4b1711123b3662bf9734f4286a27ba8817048" data-show=".Minneapolis">Minneapolis</option>
<option value="14aab41eadf986e3194857f1313ebf3d7f031610" data-show=".Oklahoma">Oklahoma</option>      
<option value="92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1" data-show=".Tampa">Tampa</option> 
</select>


<div class="my-info-1">
<div class="Charlotte hide"><div data-embed-placeholder="5466"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/29509eadce1204a5fd9ed01b44b52524a71807d7?id=5466"></script></div></div>
  <div class="Atlanta hide"><div data-embed-placeholder="5958"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0?id=5958"></script></div></div>
  <div class="Baltimore hide"><div data-embed-placeholder="5960"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/4cb0b97fa319d1c6738290b1baa5c37d648fb130?id=5960"></script></div></div>
  <div class="Columbia hide"><div data-embed-placeholder="5962"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558?id=5962"></script></div></div>
  <div class="Dallas hide"><div data-embed-placeholder="5963"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/ec69c0c76f75fe97907f93a519d0843893525105?id=5963"></script></div></div>
  <div class="Houston hide"><div data-embed-placeholder="5964"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9c60103c131ed39cdd0e865a62a8792b2c22c506?id=5964"></script></div></div>
  <div class="Indianapolis hide"><div data-embed-placeholder="5965"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/b2a9f207b4441fa73f4a832eceaaed4cf62db0cc?id=5965"></script></div></div>
  <div class="Jacksonville hide"><div data-embed-placeholder="5969"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/e75ca6fe26fedac7654a45a9e11a85d94a021844?id=5969"></script></div></div>
  <div class="Las Vegas hide"><div data-embed-placeholder="5966"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/39e75daa82e75e724b93d86f39107515241a040c?id=5966"></script></div></div>
  <div class="Minneapolis hide"><div data-embed-placeholder="5970"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a9d4b1711123b3662bf9734f4286a27ba8817048?id=5970"></script></div></div>
  <div class="Oklahoma hide"><div data-embed-placeholder="5967"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/14aab41eadf986e3194857f1313ebf3d7f031610?id=5967"></script></div></div>
  <div class="Tampa hide"><div data-embed-placeholder="5968"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1?id=5968"></script></div></div>                     
</div>

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

1. Если вы хотите настроить высоту по высоте в соответствии с окном, поэтому сначала удалите px с высоты и используйте vh вот так — w3schools.com/cssref/css_units.asp

Ответ №1:

Проблема, похоже, связана с высотой iframe. Важно установить максимальную высоту 50 пикселей, что и является причиной проблемы. Если у вас есть контроль над html iframe, там будет легко обновить css. проверьте этот скриншот и код. Я попытался переопределить этот класс новым классом, но он работал не так, как планировалосьвведите описание изображения здесь.

 <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<script>
$(document).on('change', '.div-toggle', function() {
 var target = $(this).data('target');
 var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
  });
$(document).ready(function(){
$('.div-toggle').trigger('change');
});

</script>

<style type="text/css">
.hide {
  display: none;
}
.my-info-1 iframe{ 
  height: 100% !important;
  max-height: 100% !important  
}
</style>
<select class="div-toggle" data-target=".my-info-1">
<option value="29509eadce1204a5fd9ed01b44b52524a71807d7" data-show=".Charlotte">Charlotte</option>
<option value="9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0" data-show=".Atlanta">Atlanta</option>
<option value="4cb0b97fa319d1c6738290b1baa5c37d648fb130" data-show=".Baltimore">Baltimore</option>
<option value="a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558" data-show=".Columbia">Columbia</option> 
<option value="ec69c0c76f75fe97907f93a519d0843893525105" data-show=".Dallas">Dallas</option> 
<option value="9c60103c131ed39cdd0e865a62a8792b2c22c506" data-show=".Houston">Houston</option>      
<option value="b2a9f207b4441fa73f4a832eceaaed4cf62db0cc" data-show=".Indianapolis">Indianapolis</option>      
<option value="e75ca6fe26fedac7654a45a9e11a85d94a021844" data-show=".Jacksonville">Jacksonville</option>      
<option value="39e75daa82e75e724b93d86f39107515241a040c" data-show=".Las Vegas">Las Vegas</option>      
<option value="a9d4b1711123b3662bf9734f4286a27ba8817048" data-show=".Minneapolis">Minneapolis</option>
<option value="14aab41eadf986e3194857f1313ebf3d7f031610" data-show=".Oklahoma">Oklahoma</option>      
<option value="92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1" data-show=".Tampa">Tampa</option> 
</select>


<div class="my-info-1">
<div class="Charlotte hide"><div data-embed-placeholder="5466"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/29509eadce1204a5fd9ed01b44b52524a71807d7?id=5466"></script></div></div>
  <div class="Atlanta hide"><div data-embed-placeholder="5958"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9a0df474f03b7b7080d4b39b3e0a1757f5cf64b0?id=5958"></script></div></div>
  <div class="Baltimore hide"><div data-embed-placeholder="5960"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/4cb0b97fa319d1c6738290b1baa5c37d648fb130?id=5960"></script></div></div>
  <div class="Columbia hide"><div data-embed-placeholder="5962"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a15f9d0806e9cdba3f7b9410beaa6f44cd5f5558?id=5962"></script></div></div>
  <div class="Dallas hide"><div data-embed-placeholder="5963"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/ec69c0c76f75fe97907f93a519d0843893525105?id=5963"></script></div></div>
  <div class="Houston hide"><div data-embed-placeholder="5964"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/9c60103c131ed39cdd0e865a62a8792b2c22c506?id=5964"></script></div></div>
  <div class="Indianapolis hide"><div data-embed-placeholder="5965"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/b2a9f207b4441fa73f4a832eceaaed4cf62db0cc?id=5965"></script></div></div>
  <div class="Jacksonville hide"><div data-embed-placeholder="5969"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/e75ca6fe26fedac7654a45a9e11a85d94a021844?id=5969"></script></div></div>
  <div class="Las Vegas hide"><div data-embed-placeholder="5966"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/39e75daa82e75e724b93d86f39107515241a040c?id=5966"></script></div></div>
  <div class="Minneapolis hide"><div data-embed-placeholder="5970"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/a9d4b1711123b3662bf9734f4286a27ba8817048?id=5970"></script></div></div>
  <div class="Oklahoma hide"><div data-embed-placeholder="5967"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/14aab41eadf986e3194857f1313ebf3d7f031610?id=5967"></script></div></div>
  <div class="Tampa hide"><div data-embed-placeholder="5968"><script src="https://www.local-marketing-reports.com/external/showcase-reviews/embed/92559c3e58a6b0bb7ccb12bb84cb60e2aadf28d1?id=5968"></script></div></div>                     
</div>
Метки: