位置固定宽度100%
位置固定宽度100%
提问于 2013-08-26 19:06:02
我有一个宽为250px、高度为100%的position:fixed左栏，我试图在左栏的顶部、右侧放置一个固定的、流畅的水平条，如下例所示：
但这就是我要说的：
这就是我所做的：
.page-wrapper, html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.left-column {
position:fixed;
top:0;
left:0;
z-index:1000;
width:250px;
height:100%;
background:#090909;
}
.top-bar {
position:fixed;
top:0;
left:250px;
width:100%;
height:54px;
background:#090909;
z-index:1000;
}怎样才能使这个固定的顶栏跨度为屏幕宽度的100%，而不会溢出。我希望这是一个简单的解决方法，因为我刚刚花了很长时间构建了一个相当复杂的响应式模板，并且刚刚注意到，在添加内容后，我顶部栏右侧的东西正在从屏幕上消失！
我确实有一个想法，但可能不是最理想的，所以先对其他人的建议感兴趣。可以为左侧固定列提供比顶部栏更高的z索引值，删除顶部栏的左边距，而是在顶部栏内容上放置左边距，与左侧栏的宽度相同。这听起来令人困惑，但却是可能的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-26 19:13:06
不需要最新CSS版本的非常简单的解决方案是根本不设置width。相反，只需设置right: 0，这将强制顶部栏的右边框位于右边框，这在this fiddle中可以看到。
.top-bar {
position:fixed;
top:0;
left:250px;
right:0;
height:54px;
background:#090909;
z-index:1000;
}我添加了一个红色边框，以便更容易看到框的结束位置。
Stack Overflow用户
发布于 2014-05-01 04:35:53
尝尝这个
.left-column {
float:left;
width:150px;
height:100px;
background:#090909;
color:white;
}
.top-bar {
margin-left:150px;
background:yellow;
border:2px solid red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18442628
复制相关文章
相似问题
腾讯云开发者
