我有一个宽为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索引值,删除顶部栏的左边距,而是在顶部栏内容上放置左边距,与左侧栏的宽度相同。这听起来令人困惑,但却是可能的。
发布于 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;
}
我添加了一个红色边框,以便更容易看到框的结束位置。
发布于 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;
}
https://stackoverflow.com/questions/18442628
复制相似问题