Question

我的响应式Joomla 3网站上的幻灯片（JS FlexSlider）容器出现了问题。在加载时，首先加载主要内容，并且由于幻灯片仍在加载，因此站点的其余部分位于顶部。当幻灯片显示准备就绪并且正在运行时，所有内容都会向下推送到它所属的位置。

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

有关如何解决此问题的任何提示？

div类名为＆＃34; bigimage＆＃34;它被放置在任何其他容器之外，以使其以全宽显示。

＆＃13;

</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">

＆＃13;

Answer 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 }以在页面加载时显示滑块的第一个元素。也许这种解决方法可行

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

1 个答案: