3

我正在开发响应式布局，我希望小部件保持固定/粘性，这意味着当您向下滚动页面时它会跟随您。

简化的 HTML：

<div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

CSS：

.page {
    width:96%;
    max-width:1000px;
    margin:0 auto;
}
.content {
    width:65%;
}
.sidebar {
    width:28%;
    float:right;
}
.widget1 {
    position:fixed;
    padding:7.15%; /* 20px of 280px */
    z-index:10;
}

问题： widget1通过添加position:fixed. 这导致填充百分比是从正文中计算出来的，并且完全破坏了我的布局。因为它已从流程中移除，它也不再占据侧边栏的 100% 宽度。

我需要的是：（有widget1一定百分比的填充）适合sidebar.

我发现的最接近的解决方案建议添加width:inherit固定元素。这很好用，但前提是父级的宽度设置为像素，而不是百分比。我需要添加填充这一事实也无济于事。

任何见解或建议将不胜感激。我更喜欢 CSS 解决方案，但我并不反对使用 jQuery。

如果有帮助，我正在开发一个基于 20 的响应式主题。该网站在这里： http: //odin.reaktortest.no/hvorfor-velge-fixit/ 这是我想保持固定的米色框（#iwajax_contact_widget-2）。

4

2 回答 2

1

你可以通过jquery解决这个问题

var new_width = $('#sidebar').width();
$('.widget').width(new_width);
于 2014-01-26T12:34:06.447 回答
-1

应用您的父标签position:relative，然后应用到您的侧边栏position:fixed并尝试使用它z-index:9999。

谢谢。

于 2013-10-03T07:10:44.197 回答