Question

我正在开发一个应用程序，我们将应用程序的小部件插入到底部的站点主体中。我们做了这个，以便小部件的位置是固定的，底部为：无论你在网站的哪个位置，小部件都会保留;也就是说，它位于视口的底部。问题是小部件覆盖了网站底部的元素。

有什么方法可以推送网站的内容，无论其内容的位置如何（例如位置和浮动属性），这样我们的小部件永远不会覆盖网站上的任何内容？由于小部件的“位置：固定”，它突破了正常的布局，因此放置边距或填充顶部将不会做任何事情。

我已经尝试了临时解决方案，我在小部件本身之前添加了一个div，它是小部件的高度，因此它可以推动所有内容。但是，如果网站本身有浮动或底部定位的元素，那么无论如何都会掩盖它们。

更新：感谢您的所有答案。最后，我几乎放弃了这个任务，因为它似乎是特定于站点的，并且小部件意味着通过<script>嵌入到任何站点。我猜我应该事先说过。

更新2：最后的答案解决了它。

Answer 1

你可以在身体上添加一个等于你位置高度的填充底部：fixed element。

Answer 2

在 jQuery ：

中

$('html').height( $(document).height() + numerical_height_of_your_widget );

这基本上将html标签的高度设置为内容高度的总和（通过jQuery的神奇$（文档）.height（）和任何位置的高度：fixed 元素你正在添加（在这种情况下，你的小部件）。

Answer 3

您是否尝试在<body>标记的最底部插入小部件？它位于页面底部，不需要位置：固定。它不会涵盖任何内容，因为它会遵循正常流程。

Answer 4

你必须继续使用widged absolute的定位，并为内容添加div并添加一个等于或大于你的widged高度的margin-bottom。

我想这会奏效。

Answer 5

创建一个运行页面高度的空边距：

<style>
#content {width: 80%;
          margin-left: 18%; /* to create a gutter between content and widget 
                               and to allow for borders and such */
}

#widget {width: 18%;
         position: fixed;
         bottom: 0;
         left: 0;
         padding: 0.5%;
         border-top: 1px solid #ccc;
         border-right: 1px solid #ccc;
}

</style>

...

<div id="content">

    <p>All of the branding, headers and content goes in this wrapper div.</p>

</div>

<div id="widget">

    <p>Widget goes here.</p>

</div>

...

我认为应该有效。主要是因为它为窗口小部件创建了一个列以便滑入。注意：您可能需要允许小屏幕，因此可能会创建一些方法来使窗口小部件不被推下，或者至少接受正常的弃用。

无论定位如何，都要将每个HTML元素都推开

5 个答案: