我现在已经浪费了将近一天的时间来尝试解决这个我正在从事的项目中遇到的这个小而烦人的问题，因此我想尝试一下stackoverflow。毕竟，我经常在现有线程中找到解决问题的方法，但是这次我似乎没有找到任何适用于当前问题的解决方案。
我的布局非常简单，主要内容是供稿，供稿将根据用户在菜单上所做的选择而改变。提要内容是以表格形式表示的数据，可以随容器灵活地缩放到一个点。由于菜单需要经常访问，因此已将其定位为左侧的固定框（相对于主体的左边缘），以便在向下滚动Feed时始终可以看到菜单。
剥去其裸露的骨骼，设置如下所示：
<body>
<div id="menu-wrapper"> {{menuhtml}} </div>
<div id="content-wrapper"> {{feedcontent}} </div>
</body>
现在，我要进行媒体查询以切换布局，以便菜单从纵向更改为横向，并在视口宽度小于600 px时浮动在视口的顶部，而不是向左浮动。就像一个饰物一样，但是我的问题是，当窗口宽度介于940px（全宽）和600 px之间时，默认布局才能以所需的方式运行。
理想的方法是使Feed div随窗口动态调整大小，而不引入水平滚动条，以使Feed在固定位置的菜单下滑动。我已经发现，这可能与我如何定位内容div有关，但是答案一直困扰着我。
如果我尝试margin-left: 240px;使用左平移或相对左移静态地定位内容div，则会position: relative; left: 240px;得到相同的结果：它会调整大小，但不会以所需的方式调整大小。调整窗口大小后，首先会得到一个水平滚动条，并且只有在浏览器窗口的右边缘下首先吞下左凹痕的大小后，内容div才会开始随窗口缩放。对于相对方法，我理解这是因为div的占位符仍停留在静态位置，并且仅在调整占位符的大小时才进行调整，但是令我感到惊讶的是，使用margin-left具有相同的结果。
如果我尝试使用来定位它float: right;，它会顺服地遵循浏览器窗口的右边缘，但是它不会调整大小，而是在菜单下滑动并仅在到达主体的左边缘时才开始调整大小。
最后，如果我尝试将其定位为position: absolute; right: 0;，则似乎将整个视口假定为包含对象而不是主体，并填充了屏幕的整个宽度。（自从我知道定位模型的前途告诉我它应该从body元素继承初始位置以来，我感到很奇怪）
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和风险兼容性来使某些事情看起来如此简单！提前致谢！
我似乎已经设法解决了自己的问题，因此在这里与社区分享。像大多数时候一样，由于其简单性，我们经常看不到明显的解决方案。
在这里，由于菜单的缘故，我一直在努力使div脱离自然流，而实际上，一旦我引入了填充而不是边距来获取内容，实际上让它停留在菜单下的静态位置就可以很好地工作菜单方式...
因此，我只是摆脱了所有位置和宽度的定义（因为当我第一次尝试在这些行上进行操作时，最大宽度似乎弄乱了结果），这将内容包装器重新设置为占据所有位置和宽度的标准行为在文档流中其位置上的可用水平空间，并为其填充了空白。它看起来像这样，并且完全按照我的要求工作。
#content-wrapper{
margin-top: 10px;
min-height: 300px;
padding-left: 220px;
}
一个简单而有效的解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句