问题描述
我有一个位置:固定
左列250px宽,100%高度,我试图在顶部放置一个固定,流畅的水平条,但到如下例所示:
I have a position:fixed
left column at 250px wide with 100% height and I'm trying to place a fixed, fluid horizontal bar at the top but to the right of the left column, like this example:
但这是我到这里来的:
这是我所做的:
.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% ,不溢出。我希望这是一个简单的修复,因为我刚刚花了很长时间构建一个相当复杂的响应模板,并刚刚注意到,添加内容后,我的顶部栏的右侧的东西正在消失屏幕!
How can I make this fixed top bar span 100% the width of the screen, without spilling out. I'm hoping this is a simple fix, as I've just spent ages building a fairly complex responsive template and have just noticed, after adding content, that things in the right side of my top bar were disappearing off screen!
我有一个想法,但可能不是最理想的,所以对其他建议感兴趣。左固定列可以给出比顶栏更高的z-index值,从顶栏删除左边距,而是在顶栏的内容上放置左边距,与左栏的宽度相同。
I do have one idea but may not be the most ideal, so interested in others suggestions first. The left fixed column could be given a higher z-index value than the top bar, remove the left-margin from the top bar, but instead put a left-margin on the top bar contents, the same as the width of the left column. Sounds confusing but possible.
推荐答案
不需要最新的CSS版本的非常简单的解决方案不会设置 width
。而只需设置 right:0
,这将强制顶部条的右边框坐在右边框,可以在。
Very simple solution that won't require the latest CSS version is not setting width
at all. Instead just set right: 0
, which will force the right border of the top bar to sit at the right border as can be seen in this fiddle.
.top-bar {
position:fixed;
top:0;
left:250px;
right:0;
height:54px;
background:#090909;
z-index:1000;
}
我添加了一个红色边框, 。
I've added a red border so it's easier to see where the box ends.
这篇关于位置固定宽度100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!