我如何获得一个 FIXED div 来保持它的空间？答案

【问题标题】：How do I get a FIXED div to hold it's space?我如何获得一个 FIXED div 来保持它的空间？
【发布时间】：2013-02-25 10:17:37
【问题描述】：

我正在尝试创建一个布局，其中右上角和左上角都有固定菜单（宽度均为 50 像素），中间有 900 像素宽的内容区域（不难）。但是，当用户重新调整浏览器窗口的大小时，我希望所有 DIV 元素保持其宽度 - 换句话说，我不希望任何 DIV 低于或高于任何其他 DIV。我希望浏览器窗口在小于 1000 像素（页面上元素的组合宽度）时强制水平滚动条。

这是我目前得到的，显然它不正确：http://linomeoli.com/test

代码如下：

<style type="text/css">

div#sideleft {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    left:20px;
}

div#sideright {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    right:20px;
}

div#middle {
    width:900px;
    margin:auto;
}

</style>

<body>

<div id="sideleft">
This shit<br />
that shit<br />
</div>

<div id="middle">
<img src="http://dispose.co/images/dulla_01.jpg" />
<img src="http://dispose.co/images/dulla_02.jpg" />
<img src="http://dispose.co/images/dulla_03.jpg" />
<img src="http://dispose.co/images/dulla_04.jpg" />
<img src="http://dispose.co/images/dulla_05.jpg" />
<img src="http://dispose.co/images/dulla_06.jpg" />
</div>

<div id="sideright">
previous<br />
next<br />
and whatever
</div>


</body>

我知道这一定是一项非常简单的任务；但是，我被困住了！我保证，在寻求帮助之前，我已经花了很多时间试图解决这个问题。任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： html css layout positioning fixed

【解决方案1】：

如果您摆脱固定位置并将所有 div 浮动到左侧，它们就不会相互堆叠。然后，您可以将中间 div 设置为您希望它们分开的宽度，或者创建另一个 div 来环绕该中间 div 并将其设置为您希望它们分开的宽度。您甚至可以将宽度设置为百分比，以便它会针对不同的屏幕尺寸而变化。如果你想让那个右边的 div 一直到右边，不管右边和中间 div 之间有多少空间，你只需要把那个右边浮动。

【讨论】：

你好 lefty55104，谢谢你的建议。该选项的问题是当用户调整其浏览器窗口的大小时，DIV 会从页面上掉下来，在彼此下方，而不是强制滚动条。我要试验一下表格，看看能不能让它发挥作用。
另外，为了澄清，必须修复 DIVS 以实现我正在寻找的可用性