不能让侧边栏和滚动条停在图像上方

时间:2013-10-21 19:36:04

标签: css styles format scrollbar sidebar

我有一个acitive events list侧边栏,我需要停在这个beta贴纸之上。如何才能让滚动条和活动在贴纸上方结束而不是落后于它?

这是我的一些代码:

layout.cshtml:

           <div class="s-betaSticker" style="position: absolute; bottom:0"></div> 
           <div class="s-list-event s-eventbar col scroll-y" style="overflow:auto";>
           <div class="s-list-title s-title">
           Active Events
           <form action="@Url.Action("Details", "Event")" id="acform" class="s-search" >
            @(Html.Kendo().AutoComplete()
                    .Name("s-searchEvents")
                    .DataTextField("Name")
                    .Filter("contains")
                    .MinLength(2)
                    .Placeholder("Search events...")
                    .Events(e => e.Select("onACSelect"))
                    .DataSource(source => source.Read(read => read.Action("GetEvents", "Event")))
                )
             </form>                             
              </div>

        <div class="s-content">
        @Html.Partial("_EventList", (IEnumerable<ArdentMC.Sentry.Data.Event>)ViewBag.EventList)
        </div>       
     </div>
     <div class="s-stream col scroll-y" id="s-eventStream">
    <div class="s-event-details"></div>
    <div class="s-stream-content"></div>
     </div>

         <div class="s-stream col scroll-y" id="s-eventStream">
            <div class="s-event-details"></div>
             <div class="s-stream-content"></div>
          </div>
   css:

          .s-betaSticker {
           width: 150px;
            height: 121px;
         position: absolute;
           left: 0;
           bottom: 0;
            background-image: url("../Images/beta.png");
           background-size: cover;
              /* In case size is reduced/increased */
                  }

请给我任何建议或反馈,我一直试图解决这个问题好几天,似乎无法得到。谢谢 这是一个问题的屏幕截图 -  sidebar issue

1 个答案:

答案 0 :(得分:0)

我想出了自己的问题。我能够在侧边栏中添加页脚并将图像添加到页脚中。我只是使用与列表相同的样式和背景颜色,它工作得很好,没有重叠,看起来很棒 working screen shot of scroll bar and image not overlapping