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;
}

问题： widget1通过添加position:fixed而被取消。这导致填充百分比从身体计算并完全破坏我的布局。因为它已从流程中移除，所以它也不再占据侧边栏的100％宽度。

我需要的是：让widget1（填充百分比）适合sidebar的整个宽度。

The closest solution I've found建议在固定元素上添加width:inherit。这很有用，但前提是父级的宽度以像素为单位，而不是百分比。它也无助于我需要添加填充。

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

如果有帮助，我正在制作一个基于Twenty Ten的响应主题。该网站位于：http://odin.reaktortest.no/hvorfor-velge-fixit/ 这是我想要修复的米色方块（#iwajax_contact_widget-2）。

Answer 1

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

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

Answer 2

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

感谢。

响应式布局中具有固定位置的项目

2 个答案: