html - 如何让最底部的 div 停止 float 在页脚处

Question

我右边有3个div float ，位置是固定的。我希望最底部的 div 在到达页脚时停止；但是，它位于页脚后面并被覆盖。一段时间以来，我一直在尝试解决此问题，但无法弄清楚。页脚设置在position:relative位置，宽度也设置为 100%。

    .sidebar-sticky {
            margin-right: 9px;
            position: fixed;
            margin-left: 800px;
        }

        .sidebar-sticky2 {
            margin-right: 9px;
            position: fixed;
            margin-left: 800px;
            margin-top: 350px;
        }

        .sidebar-sticky3 {
            margin-right: 9px;
            margin-left: -340px;
            margin-top: 605px;
            position: fixed;
        }

    <!-- Office Reservation -->
            <asp:Panel ID="pnl_In_Out" runat="server">
            <div class="sidebar-sticky">
                <!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
                <%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
                <div class="office-reservation">
                    <div class="panel-main panel-primary">
                        <div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">OFFICE RESERVATION</div>
                        <hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
                        <%--<div class="divider-line" style="width: 90px; border-top: 1px solid #ddd; text-align: center; margin: 0px 50px 0px 70px;"></div>--%>
                        <div class="panel-body">
                            <div class="row">
                                <div class="form-group" style="padding-left: 5px; text-align: left">
                                    <label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>In</b></label>
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="textarea-form">
                                                <asp:TextBox ID="txt_SearchDateFrom" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" style="padding: 3px;"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="">
                                                <%--<asp:TextBox ID="txt_SearchTimeFrom" CssClass="form-control" Width="145" runat="server"></asp:TextBox>--%>
                                                <asp:DropDownList ID="ddl_SearchTimeFrom" CssClass="form-control text-right" Width="145" Height="35" runat="server"></asp:DropDownList>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-time" style="padding: 3px; width: 20px"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group" style="padding-left: 5px; text-align: left">
                                    <label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>Out</b></label>
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="">
                                                <asp:TextBox ID="txt_SearchDateTo" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" style="padding: 3px"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="">
                                                <%--<asp:TextBox ID="txt_SearchTimeTo" CssClass="form-control timepicker timepicker-no-seconds" Width="145" runat="server"></asp:TextBox>--%>
                                                <asp:DropDownList ID="ddl_SearchTimeTo" CssClass="form-control" Width="145" Height="35" runat="server"></asp:DropDownList>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-time" style="padding: 3px; width:20px"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wigdet_input_box" style="padding-top: 5px;">
                                <asp:Button ID="btn_Reserve" runat="server" Text="RESERVE" CssClass="btn btn-danger" Width="50%" OnClick="btn_Reserve_Time_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </asp:Panel>

            <!-- QUICK CONTACT FORM -->
            <asp:Panel ID="pnl_Question" runat="server">
                <!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
                <%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
                <div class="sidebar-sticky2">
                    <div class="panel-main panel-primary">
                        <div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">QUESTIONS ?</div>
                        <hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
                        <div class="panel-body">
                            <div class="row">
                                <div class="form-group" style="padding-left: 5px; text-align: left">
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="">
                                                <asp:TextBox ID="txt_Email" CssClass="form-control" Width="145" Font-Size="Small" runat="server" placeholder="Email Address"></asp:TextBox>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-envelope" style="padding: 3px"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <div class="col-md-12">
                                            <div class="">
                                                <asp:TextBox ID="txt_Message" TextMode="multiline" Rows="3" Font-Size="Small" CssClass="form-control" class="contact-message" Style="width: 100%!important; height: 70px; resize: none;" runat="server" placeholder="Enter Message"></asp:TextBox>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wigdet_input_box" style="padding-top: 5px;">
                                <asp:Button ID="btn_Message_Send" runat="server" Text="SEND" CssClass="btn btn-danger" Width="50%" OnClick="btn_Message_Send_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </asp:Panel>

            <!-- CONTACT INFORMATION -->
            <asp:Panel ID="Panel1" runat="server">
                <!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
                <%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
                <div class="sidebar-sticky3">
                    <div class="panel-main panel-primary">
                        <div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">AGENT INFORMATION</div>
                        <hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
                        <div class="panel-body"">
                            <%--<div class="agent-photo">
                                <img src="/images/agent_face.jpg" width="80" alt="Agent" style="float: left;" />
                            </div>--%>
                            <div class="contact-info" style="text-align: center; color: #444; font-size: 14px;">
                                <%--<img src="/images/agent_face.jpg" width="150" alt="Agent" />--%>
                                <h5>Contact Number: </h5><asp:Label ID="lbl_ListingContactPhone" runat="server" Text="none"></asp:Label>
                                <h5>E-mail Address: </h5><asp:Label ID="lbl_ListingContactEmail" runat="server" Text="none"></asp:Label>
                            </div>
                            
                        </div>
                    </div>
                </div>

jQuery(document).ready(function() {
      var el = jQuery('#sidebar');
      top_offset = jQuery('#sidebar').offset().top - 60;
      var box_height = el.height();

      jQuery(window).scroll(function() {
        var scroll_top = jQuery(window).scrollTop();
        var bottom_offset = jQuery(document).height() - scroll_top - box_height;
        var new_top_offset = jQuery(document).height() - box_height - 100;

        if ((scroll_top > top_offset) && (bottom_offset > 180))  {
          el.css('top', scroll_top - top_offset);
        }
        else if ((scroll_top > top_offset) && (bottom_offset < 181)) {
          el.css('top', new_top_offset);
        }
        else {
          el.css('top', '');
        }
    });
    });

Answer 1

我不认为你在使用 position: fixed; 如果你告诉元素用 fixed 定位，你是在将它设置为相对于视口(viewport)固定定位并且它不会移动从那里。另外，最好这样放置它们:

position: fixed;
bottom: 0;
right: 0;

最好使用顶部、右侧、底部和左侧，然后使用边距。我想如果您想在向下滚动时更改固定定位元素的行为，您应该考虑为此使用 javascript。