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轮播现在是响应式的。

对于你的class A4，我有这个区块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;

}

enter image description here

使用bootstrap轮播滑块的高度困难

1 个答案: