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

我正在处理响应式布局，并且我希望小部件保持固定/粘滞状态，这意味着当您向下滚动页面时它会跟随您。在响应式布局中固定位置的项目

简体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。

如果有帮助，我正在基于二十十的响应主题工作。该网站在这里：http://odin.reaktortest.no/hvorfor-velge-fixit/ 这是我想保留修复的米色框（#iwajax_contact_widget-2）。

来源

2013-10-03 sarahjadesigns

你的意思是它得到调整解决这个问题？ –

@MattSaunders在页面的最大宽度上，小部件占用页面宽度的28％/ 280px，而没有固定的位置。在固定位置时，它向右溢出并变为435px。高度也会改变。使视口变小使得它小于435像素，所以它似乎使用其他东西的百分比... – sarahjadesigns

编辑我的问题，因为我想出了问题，但不是如何解决它。 – sarahjadesigns

-1

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

谢谢。

来源

2013-10-03 07:10:44

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

您可以通过jQuery的

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

来源

2014-01-26 12:34:06

接近修复它，但小部件泄露了其父div（'.page'和'.sidebar'）的权利。它溢出的数量似乎是左右填充的大小。我尝试在窗口小部件的CSS中添加'box-sizing：border-box'，但这并没有解决问题。 – sarahjadesigns

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

回答

相关问题