Joomla 响应式网站上的幻灯片容器最小高度答案

【问题标题】：slideshows container min-height on Joomla responsive siteJoomla 响应式网站上的幻灯片容器最小高度
【发布时间】：2015-06-28 15:17:17
【问题描述】：

我的响应式 Joomla 3 网站上的幻灯片 (JS FlexSlider) 容器有问题。在加载时，首先加载主要内容，由于幻灯片仍在加载，因此网站的其余部分位于顶部。当幻灯片准备好并运行时，所有内容都会被向下推到它所属的位置。

现在，由于网站是响应式的，我不能只为幻灯片容器设置一个最小高度，因为这个值会根据视点而变化。

关于如何解决这个问题的任何提示？

my site

div 类被称为“bigimage”，它被放置在任何其他容器之外以使其全宽显示。

</head>
<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">

  
    <!-- Begin Navbar-->
    <?php if ($this->countModules('position-9')): ?>
      <div class="navbar navbar-inverse navbar-fixed-top">
      <!-- navbar-inverse navbar-fixed-top -->
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>          
            <a class="brand" href="#"><?php echo $sitename ?></a>
            <div class="nav-collapse collapse">
              <jdoc:include type="modules" name="position-9" style="none" />
            </div>
          </div>
        </div>
      </div><!--End navbar-->
      <?php endif; ?>
  
        <?php if ($this->countModules('position-5')): ?>
				<div class="bigimage">
					<jdoc:include type="modules" name="position-5" style="none" />
					<div class="clearfix"></div>
				</div><!--End Bigimage-->        
				<?php endif; ?>

	<div class="container">
    
		<!-- Begin Header-->
		<div class="header">
			<div class="header-inner">

【问题讨论】：

标签： joomla responsive-design height containers

【解决方案1】：

您可以使用media queries 为不同分辨率设置.bigimage 的最小高度。

/* Small devices (tablets, 768px and up) */    
@media (min-width: 768px) { 
    .bigimage{
         min-height: 300px;
    }  
}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) { 
     .bigimage{
         min-height: 500px;
    }   
 }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .bigimage{
         min-height: 800px;
    } 
}

正如我所见，它在开始运行之前隐藏了所有元素。尝试设置.flexslider .slides > li:first-child { display: block } 以在页面加载时显示滑块的第一个元素。也许这种解决方法会起作用

【讨论】：

抱歉，在我发完帖子之前就发送了。谢谢你，Tony。但由于 .bigimage 容器总是全宽，这些媒体查询是不够的。如果有人例如没有最大化他的浏览器窗口，容器可以有任何高度。没有其他解决办法吗？
@Lyzarr 我看到它在开始运行之前隐藏了所有元素。尝试设置.flexslider .slides > li:first-child { display: block } 在页面加载时显示滑块的第一个元素。也许这种解决方法会起作用
@Lyzarr 很高兴听到它）
拜托，我可以再次请求您的帮助吗：stackoverflow.com/questions/29803028/…？我已经有 2 天没有得到答案了，你在这里帮我解决了这个问题，做得很棒。对不起这个特技，但我完全被困住了。