现场有这样一个原型（最好全屏观看）：
body {
font-size: 20px;
}
.container {
border-left: 1px solid silver;
border-right: 1px solid silver;
}
aside {
background-color: silver;
border-radius: 5px;
padding: 10px;
}
aside ul {
margin: 0;
}
aside ul li {
list-style: none;
margin: 5px;
}
.main {
background-color: gray;
border-radius: 5px;
}
#comp, #uslugi, #zakaz, #kontakt {
height: 400px;
padding: 20px;
margin: 20px 5px;
background-color: silver;
border-radius: 5px;
}<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="jumbotron"><h1>Компания</h1></div>
<aside class="col-md-3">
<ul>
<li>О компании</li>
<li>Услуги</li>
<li>Заказать</li>
<li>Контакты</li>
</ul>
</aside>
<div class="main col-md-8 col-md-offset-1">
<div id="comp">Здесь информация о компании</div>
<div id="uslugi">Тут описание наших услуг</div>
<div id="zakaz">В этом блоке можно оформить заказ</div>
<div id="kontakt">Здесь - связаться с нами</div>
</div>
</div>任务是让它只有包含所有信息的主块滚动，而超大屏幕和菜单保留在原位。我为他们设置了 position: fixed 并得到了这个垃圾：
很明显，随着手鼓跳舞对 left、top、margin、z-index 等进行操作。您可以在页面上实现或多或少可以接受的元素排列（尽管这与“拐杖”非常相似，这很糟糕）。
但最糟糕的是，固定元素的宽度被破坏了：对于超大屏幕，它会折叠，而对于菜单，由于某种原因，它会相反地展开：
我不想强迫它们有一定的宽度（这样就完全失去了使用引导网格的意义，你将不得不为不同的屏幕尺寸手动调整这个宽度）。
问题：有什么方法可以处理 position: fixed 的元素，让它们在流中保持宽度和位置？
这是固定块的预期行为。如果您需要这些块不爬出网格，并且在页面上为它们保留一个位置也无妨，您可以尝试制作两个相同的块。
第一个 - 安装
visibility: hidden后，它会简单地计算位置。第二个 - 对于已安装的position: fixed，需要通过脚本将其严格放置在第一个之上。最好先显示第一个块，然后用脚本隐藏它——然后页面将正确显示，直到脚本开始。而如果。第二个块可以使用相同的脚本创建，以免受到布局的影响。
结果会是这样的：
现在还为时过早，但我仍然会写下这个答案——当它派上用场时突然间：