响应式布局中位置固定的项目答案

【问题标题】：Item with fixed position in responsive layout响应式布局中位置固定的项目
【发布时间】：2013-10-09 17:54:15
【问题描述】：

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

简化的 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 的整个宽度。

The closest solution I've found 建议在固定元素上添加width:inherit。这很好用，但前提是父级的宽度设置为像素，而不是百分比。我需要添加填充这一事实也无济于事。

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

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

【问题讨论】：

调整大小是什么意思？
@MattSaunders 在页面的最大宽度处，小部件占据页面宽度的 28% / 280px，没有固定定位。使用固定定位，它会向右溢出并变为 435px。高度也会发生变化。使视口变小使其小于 435px，所以它似乎在使用其他东西的百分比......
编辑了我的问题，因为我发现了问题，虽然还没有解决它。

标签： css wordpress responsive-design css-position

【解决方案1】：

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

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

【讨论】：

这接近于修复它，但小部件溢出其父 div 的右侧（.page 和 .sidebar）。它溢出的量似乎是左右填充组合的大小。我尝试将 box-sizing:border-box 添加到小部件的 CSS 中，但这并没有解决问题。

【解决方案2】：

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

谢谢。

【讨论】：

不幸的是，这并不能解决小部件重新调整大小的主要问题。