位置固定宽度100％ [英] Position Fixed width 100%

问题描述

我有一个位置：固定左列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:

但这是我到这里来的：

这是我所做的：

JSFIDDLE

.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％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！