Question

在我们网站的销售页面上，当用户完成整个过程时，页脚会上下起伏，这会让人感到烦恼。

这是我正在使用的自定义CSS：

＆＃13;

document.getElementsByClassName('modal-body')[0].innerHTML='html string'

＆＃13;

这是布局文件：

＆＃13;

.ajax-loader,.offer-n-accept,.thumbnail{text-align:center}.repop-row,.repop-row-selected{border:1px solid #ebebeb;padding:20px}#declaration,#save_data,.ajax-loader,.error-msg,.payment_information,.previews{display:none}@font-face{font-family:brandfont;src:url(Inversionz.otf)}.branded{font-family:brandfont;font-size:300%;color:#FFF}.navbar .navbar-brand{font-family:brandfont;font-size:40px;color:#f5f5f5}.navbar-inverse .navbar-brand{font-family:brandfont;font-size:40px;color:#FFF}.navbar-default .navbar-brand:hover{font-family:brandfont;font-size:40px;color:#2E64FE}.row.repsteps,.row.steps{margin-bottom:10px;text-align:center;display:none}.thumbnail{cursor:pointer}.thumbnail:hover{border-color:#2E64FE}h1 span{color:#2E64FE}.offer-n-accept span{font-size:80px}.footer-links{color:#ebebeb;margin-left:5px;margin-right:5px}.repop-row,.repop-row-selected{margin-left:auto;margin-right:auto}footer.well{background-color:#000;color:#FFF;margin-top:0;margin-bottom:0;border-top:10px solid #2e64fe}.social-icons{font-size:43px;color:#fff}.repop-row{border-radius:2px;width:90%;height:90%;cursor:pointer}.repop-row-selected{border-radius:2px;width:90%;height:90%;background-color:#2e64fe;color:#fff;cursor:pointer}.repop-row:hover{border-color:#2e64fe}.repop-row-selected .repop-price-col{font-size:20px;color:#333;background-color:#fff;border-radius:2px;padding:5px}.repop-price-col,.selected .thumbnail{background-color:#2e64fe}.repop-price-col{font-size:20px;color:#fff;border-radius:2px;padding:5px}.repop-row-selected .repop-title-col{font-size:20px;margin-top:4px;color:#fff}.repop-title-col{font-size:20px;margin-top:4px}.selected .thumbnail .caption{color:#fff}.thumbnail .preview-title{font-size:16px;color:#2e64fe}span.device-price{font-size:40px;color:#337AB7;font-weight:700}.facebook-icon:hover{color:#3A5795}.twitter-icon:hover{color:#2B7BB9}.howitworks{background-color:#F2F2F2;padding:50px;margin-bottom:0}.howitworks div h3{color:#2e64fe}.howitworks div span.fa{font-size:80px}.accessory-selected .thumbnail{background-color:#2e64fe}.accessory-selected .thumbnail .caption h3{color:#FFF}.social-icons{margin:5px}.faq{background-color:#FAFAFA}.item img{margin-left:auto;margin-right:auto}.feature h2{color:#2e64fe}.btn-toolbar .btn{margin-bottom:5px}@media(max-width:767px){.h1,h1{font-size:32px}.h3,h3{font-size:18px}}

＆＃13;

Answer 1

您可以将位置设置为position: absolute;，然后您的页脚将位于同一位置 position: relative;会让它反弹，如果您添加它，请将其更改为position: absolute;并添加top: 1000px或任意高度。

Answer 2

您应该考虑使用sticky footer

<footer class="footer">
  <!-- Your footer content here -->
</footer>

可以找到粘性<footer> here和css here

Answer 3

对我而言，有两条建议可能是：

给你的<div class="section-md">一个最小高度，以便它按下页脚，屏幕的宽度变化很大，但高度并不常见。然后，它还将继续关注较小的设备。

或者你可以制作一个<div class="section-md">并给它一个固定的位置，以确保它始终位于底部，以防你想要随时显示该信息。

但是，此问题可能有更多解决方案。

Answer 4

关于粘性页脚的好选择。

您还可以向包含所有步骤的类var lines = store.Query<DebetInvoiceItemAll.Mapping, DebetInvoiceItemAll>() .Where(a => a.InvoiceId.Equals(invoice.Id, StringComparison.OrdinalIgnoreCase)) .As<DebetInvoiceDistributedPurchaseItem>() .All().ToList(); value = info.Amount; decimal totalInvoicePrice = invoice.TotalDecimal ?? 0m; decimal percentagePaid = value / totalInvoicePrice; var rates = store.Query<VATPercentageAll.Mapping, VATPercentageAll>() .As<VATPercentage>() .GroupBy(a => a.Id) .ToDictionary(a => a.Key, a => a .ToDictionary(b => b.CountryId, b => b.Percentage, StringComparer.OrdinalIgnoreCase));的部分添加一个额外的类（fx。：order-steps）。添加属性到

section-md

这将使'＃room;对于不同步骤中的内容。

我的页脚上下跳动

4 个答案: