Html 位置固定宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18442628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position Fixed width 100%
提问by TheCarver
I have a position:fixedleft 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:
我有一个position:fixed250px 宽、100% 高度的左列，我试图在顶部但在左列的右侧放置一个固定的、流畅的水平条，如下例所示：
But this is what I'm getting here:
但这就是我在这里得到的：
This is what I have done:
这就是我所做的：
.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;
}
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!
我怎样才能让这个固定的顶部栏跨越 100% 的屏幕宽度，而不会溢出。我希望这是一个简单的修复，因为我花了很长时间构建一个相当复杂的响应式模板，并且刚刚注意到，在添加内容后，顶部栏右侧的东西从屏幕上消失了！
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.
我确实有一个想法，但可能不是最理想的，因此首先对其他建议感兴趣。可以为左侧固定列提供比顶部栏更高的 z-index 值，从顶部栏移除左边距，而是在顶部栏内容上放置左边距，与左侧栏的宽度相同. 听起来令人困惑，但可能。
回答by Mario
Very simple solution that won't require the latest CSS version is not setting widthat 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.
不需要最新 CSS 版本的非常简单的解决方案根本没有设置width。而只是设置right: 0，这将强制顶部栏的右边框位于右边框，如本小提琴所示。
.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.
我添加了一个红色边框，以便更容易看到框的结束位置。
回答by Danield
Instead of using left: 250pxuse padding-left:250pxin conjuction with box-sizing: border-box:
而不是与left: 250pxusepadding-left:250px结合使用box-sizing: border-box：
.top-bar {
position:fixed;
top:0;
left:0;
width:100%;
height:54px;
background:#090909;
z-index:1000;
padding-left: 250px;
-moz-box-sizing: border-box:
box-sizing: border-box:
}
回答by Nicola Mihaita
Try this
尝试这个
.left-column {
float:left;
width:150px;
height:100px;
background:#090909;
color:white;
}
.top-bar {
margin-left:150px;
background:yellow;
border:2px solid red;
}
