html - 如何让位于菜单右侧的 <div> 随着浏览器窗口的展开而展开？

Question

你一定知道这个问题非常适合我的情况，我真的很想听听你们的意见!

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

第一种情况: 我将侧边菜单 float 到左侧，我也将包含内容的 div float 到左侧，但是当我将其宽度设置为 100% 时，它会位于侧边菜单下方。

第二种情况: 我将侧边菜单 float 到左侧，并将包含内容的 div 放置在侧边菜单的右侧，方法是给它一个 margin-left 250px。

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

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

问题2:如何将包含内容的div放在侧边菜单旁边？我漂浮它吗？我给它留边距吗？我绝对定位它吗？

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

这是它的截图:(点击链接)

side menu on the left and content on the right

Answer 1

看来您还没有开始编码。这是个问题，所以我的回答会有点枯燥，但我们开始吧:

Question 1: How do i give the div containing the content a non-fixed width so it can expand or shrink when the browser's window is resized. The side-menu will still be there even when the browser window size shrinks or expands.

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

Question 2: How do I place the div that contains the content next to the side menu? Do I float it? Do I give it a margin-left? Do I absolutely position it?

同样，使用 CSS Flexbox .

But like what is the general practice in this kind of situations? How do other websites do it? Media-queries?

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

---

chalice 布局示例:

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

希望我有所帮助。