css设置局部滚动条大小,CSS：如何让一个定位的div与窗口水平调整大小，而不是滚动条...

我已经浪费了将近一天的时间，试图解决这个我正在处理的项目所面临的这个小而​​烦人的问题，所以我以为试着给stackoverflow。毕竟，我经常在现有的线程中发现我的问题的解决方案，但是这次我似乎没有找到适用于我目前问题的任何东西。CSS：如何让一个定位的div与窗口水平调整大小，而不是滚动条

我有一个非常简单的布局，主要内容是根据用户在菜单上做出的选择而改变的提要。供给内容是以表格形式表示的数据，其容器可以灵活地缩放到一定的点。由于菜单需要经常访问，因此它在左侧(相对于身体的左侧边缘)被定位为固定框，以便在向下滚动Feed的同时始终保持其位置。

剥离其裸露的骨头，设置是这样的：

{{menuhtml}}

{{feedcontent}}

现在，我已经有了一个媒体查询回事，这样从纵向菜单更改景观和去切换布局浮动在视口的顶部，而不是一旦视口宽度小于600像素，这就像一个魅力，但我的问题是让默认布局的行为以所需的方式，而窗口宽度是940px之间(全宽)和600像素。

想要的方法是让feed div动态调整窗口大小，而不是引入横向滚动条，使得feed在菜单下位置固定。我已经发现，这可能是我如何定位内容div的问题，但答案并没有解决。

如果我尝试使用margin-left: 240px;静态定位内容div，或者使用左侧翻译position: relative; left: 240px;进行静态定位，我会得到相同的结果：调整大小，但不是按照所需的方式。一旦我调整窗口的大小，我首先得到一个水平滚动条，并且只有在浏览器窗口的右边缘首先吞噬左缩进的大小后，内容div才开始与窗口一起缩放。对于相对的方法，我知道这是因为div的占位符仍然停留在它的静态位置，并且只有在占位符被调整大小时才被调整大小，但是我很惊讶使用左侧的余量具有相同的结果。

如果我试图用float: right;来定位它，它会顺从地跟随浏览器窗口的接近右边缘，但不是调整大小，而是在菜单下面滑动，并在它到达主体的左边缘时开始仅调整大小。

最后，如果我试图用position: absolute; right: 0;来定位它，它似乎假设整个视口作为其包含的对象而不是主体并填充整个屏幕宽度。 (我觉得自从eveyrthing我知道我知道的定位模型告诉我，它应该继承从身体元素的初始位置)

CSS的定位部分在下面(我省略了字体，背景，颜色&例如)

body

{

max-width: 900px;

margin: 0 auto;

padding: 0 20px 0 20px;

}

div#menu-wrapper

{

position: fixed;

top: 120px;

min-width: 180px;

min-height: 180px;

padding: 10px;

}

div#content-wrapper

{

margin-top: 120px;

max-width: 600px;

min-width: 300px;

width: 100%;

/* SOME POSITIONING HERE */

}

哦，和一切自带的内容封装器(具有一些修饰，这反过来又保持与实际内容的表的另一个DIV中)是静态设置且具有或者没有宽度定义或宽度：100 ％;

我真的很感谢任何帮助。我不敢相信我不得不诉诸HTML表格，风险简单或JavaScript和风险兼容性来做出看似如此简单的工作！提前致谢！

+0

试图按照我的脑袋，但不知道如果我得到它或不... ...但你有没有尝试只用边距来设置你的div的宽度？因此，将宽度设置为自动可以覆盖可能应用的其他媒体查询中的任何位置，然后只需在左右两边设置边距，以使距离边缘的距离...宽度应该自动设置为使利润率合适。 –

+0

对不起，我的意思是左边和右边的数额(用于像边距)绝对定位，而不是像我说的边距。 –

+0

感谢您的输入。设置位置：绝对; left：auto;'或者right：auto;'似乎没有什么作用。结果与我没有设置左侧或右侧参数相同。同时设置这两者是一个不好的主意，它会导致它们在增加不必要的复杂性的同时相互取消对方。 –