css - 响应式布局中具有固定位置的元素

Question

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

简化的 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;
}

问题:通过添加 position:fixed，widget1 从流程中取出。这会导致从正文计算填充百分比并完全破坏我的布局。由于它已从流程中删除，因此它也不再占据侧边栏的 100% 宽度。

我需要什么:让widget1(带有一定百分比的填充)适合侧边栏的整个宽度。

The closest solution I've found建议在固定元素上添加 width:inherit 。这非常有效，但前提是父级的宽度以像素为单位而不是百分比设置。它也对我需要添加填充这一事实没有帮助。

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

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

Answer 1

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

var new_width = $('#sidebar').width();
$('.widget').width(new_width);