使用引导轮播滑块的高度困难

Question

使用轮播滑块时，我可以显示我想要显示的所有内容。问题是我正在显示的某些内容在高度方面适合屏幕。 链接到示例Here

我的 javascript 技能非常有限。是否在考虑是否有一种方法可以用纯 CSS 解决这个问题？还是需要其他方法？

我的控制器：

public ActionResult Slider()
    {
        var valid = (from x in db.JobOffer
                     where x.JobStatusModelId == 1
                     orderby x.DateCreated descending
                     select new SliderViewModel()
                     {
                         JobOfferModelId = x.JobOfferModelId,
                         ContentId = x.ContentId,
                         JobTitle = x.JobTitle,
                         DateCreated = x.DateCreated,
                         DateVisible = x.DateUnvisible,
                         Content = x.Content


                     }).ToList();

        ViewBag.Slide = valid;


        return View();
    }

我的看法

<div id="myCarousel" class="carousel">
<div class="carousel-inner">
    <div class="item active">
        <div class="content-wrapper">
            <div style="width: 70%; margin: auto;">
                <div style="background-color: white; margin-top: 0px; min-height: 1000px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;">

                    <div align="center">Leys størv á www.starv.fo</div>
                </div>
                <br />
            </div>
            <br />

        </div>
    </div>



    @foreach (SliderViewModel item in ViewBag.Slide)
    {
        <div class="item">
            <div class="content-wrapper">
                <div class="A4">
                    <div id="div">




                        <div style="background-color: white; margin-top: 0px;  border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;">

                            <div class="oval">
                                <img src="/Heim/RetrieveImage/@item.ContentId" alt=""  height="60px;" /><br />
                            </div>
                            <div style="font-size: 25px; padding-left: 54px; padding-top: 45px;"><b>@Html.DisplayFor(modelItem => item.JobTitle)</b></div>


                            <div style="font-size: 16px; padding-left: 54px;">@Html.ShowCompany(item.ContentId.ToString())</div>
                            <div style="padding-top: 25px; font-size: 13px; padding-left: 54px; padding-right: 54px; line-height: 15px;">@Html.Raw(item.Content)<hr />
                            </div>


                        </div>

                        <br />
                    </div>
                </div>
                <br />
            </div>
        </div>
    }
</div>

我知道从不使用内联样式。但它只是一个快速测试站点。

Answer 1

你好 Qwerty，对于我在这里收集的内容，您希望控制轮播的整体高度，并尝试显示您在轮播中显示的信息的不同高度。

这就是我在此提供帮助的原因。

对于轮播，我将高度设置为max-height: 90vh;。

像这样使用vh，轮播现在可以响应了。

对于您的 A4 的 class，我有这个块 scroll。
对于 主要内容 正文，我给了它一个高度...您可以在此处将其设置为适合您的内容。
当该区域没有太多内容时，这将阻止轮播调整大小。
您需要检查您的代码并将此 class="text-height" 粘贴到此下方的每个 div
<div style="font-size: 16px; padding-left: 54px;">Føroya Tele</div>

我只为这个演示的前 5 或 6 个做过这个。

在每个部分的顶部，您设置了height:1050px; 的高度，我删除了所有这些。

这是一个显示所有内容的轮播Fiddle。

Full size Fiddle.

这里的代码设置轮播的高度。

.carousel-inner  {
    width: 100%;
    margin: auto;
    max-height: 90vh;

}