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

Question

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

所以，我试图在我的网站上有一个页面左侧有一个菜单，右侧有内容。我给包含宽度为200px的菜单的div，但我的问题是，如何将包含内容的div放在侧边菜单的右侧？因为请记住，当浏览器窗口大小发生变化时，我希望包含内容的div扩展或缩小。

第一种情况： 我将侧边菜单浮动到左侧，我还将包含内容的div浮动到左侧，但当我给它宽度为100％时，它会进入侧边菜单。

第二种情况： 我将侧边菜单浮动到左边，我将包含内容的div放在侧边菜单的右侧，给它留下250px的边距。

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

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

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

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

以下是它的截图:(点击链接）

side menu on the left and content on the right

Answer 1

您似乎还没有开始编码。这有点问题，所以我的答案会有点干，但我们走了：

  

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

CSS Flexbox flex-basis可能会成功。如果您将其与relative units结合使用，例如百分比。

  

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

再次使用CSS Flexbox。

  

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

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

圣杯布局示例：

1. 按照MDN的指南：using CSS Flexible Boxes
2. 如果您遇到问题和一段代码，请点击此处，以便我们提供帮助

希望我帮了一下。

Answer 2

也许我过度简化了您的问题，但是当浏览器窗口大小发生变化时，使用百分比作为宽度。您可以点击＆＃34;运行代码段＆＃34;看到它在行动。

＆＃13;

＆＃13;

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

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

#content {
  width: 79%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;