当浏览器窗口展开时，如何让菜单右侧的 <div> 展开？

Question

你一定知道这个问题对我的情况非常具体，我真的很想听听你们要说什么！

所以，我想在我的网站上创建一个页面，左侧是菜单，右侧是内容。我给包含菜单的 div 设置了 200px 的宽度，但我的问题是，如何将包含内容的 div 放置在侧菜单的右侧？因为请记住，我希望包含内容的 div 随着浏览器窗口大小的变化而扩大或缩小。

第一个场景： 我将侧边菜单浮动到左侧，我还将包含内容的 div 浮动到左侧，但是当我将其宽度设为 100% 时，它会位于侧边菜单下方。

第二种情况： 我将侧边菜单浮动到左侧，并将包含内容的 div 放置在侧边菜单的右侧，并赋予其 250px 的左侧边距。

但是在这两种情况下，包含内容的 div 都不适合浏览器的窗口，这意味着如果我调整浏览器的大小，div 不会展开，它会在侧面菜单下。

问题 1： 如何为包含内容的 div 赋予非固定宽度，以便在调整浏览器窗口大小时它可以扩大或缩小。即使浏览器窗口缩小或扩大，侧边菜单仍然存在。

问题 2：如何将包含内容的 div 放在侧边菜单旁边？我漂浮它吗？我给它一个margin-left吗？我绝对定位吗？

请告诉我如何放置该 div 以及如何使其扩展或缩小以适应不同的浏览器窗口大小。

这是它的截图：（点击链接）

side menu on the left and content on the right

Answer 1

也许我过度简化了您的问题，但是当浏览器窗口大小发生变化时，使用百分比作为宽度是可行的。您可以单击“运行代码 sn-p”来查看它的运行情况。

#menu,#content {
  display: inline-block;
  vertical-align: top;
}

#menu {
  width: 20%;
  background-color: #eee;
}

#content {
  width: 79%;
}

<div id="menu">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div id="content">
<p>This is the content that shows up to the right of the menu on the left.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>

Answer 2

您似乎还没有开始编码。这有点问题，所以我的回答会有点枯燥，但我们开始吧：

问题 1：如何给包含内容的 div 赋予非固定宽度，以便在调整浏览器窗口大小时它可以扩大或缩小。即使浏览器窗口缩小或扩大，侧边菜单仍然存在。

CSS Flexbox flex-basis 可能会成功。如果你把它和relative units 结合起来，比如百分比。

问题 2：如何将包含内容的 div 放在侧边菜单旁边？我漂浮它吗？我给它一个margin-left吗？我绝对定位吗？

再次，使用CSS Flexbox。

但是像这种情况下的一般做法是什么？其他网站是如何做到的？媒体查询？

通常媒体查询是一个很好的开始方式，是的。这是一个很好的指南：using media queries - MDN

---

圣杯布局示例：

1. 遵循 MDN 的指南：using CSS Flexible Boxes
2. 如果您遇到问题并展示一段代码，请来这里，以便我们提供帮助

希望我能帮上一点忙。