响应式 div 宽度结合固定宽度 div 纯 CSS

Posted 2023-03-06

【中文标题】响应式 div 宽度结合固定宽度 div 纯 CSS

【英文标题】：responisive div width combined with fixed width div pure CSS

【发布时间】：2016-01-19 00:43:23

【问题描述】：

我有一个垂直分成两部分的网页：

Div1：具有固定宽度 (200px) 的一个，包含一个菜单 Div2：具有百分比宽度的一个，包含图像

是否有一种纯 CSS 方式来缩放 Div2，以便它始终填充缩放时留下的“空间”？

这里有一张图片来说明这个想法（忽略 div 之间的边距）。请注意，左边的 div 保持他的200px 宽度，而另一个 div 获得剩余的宽度。

我在想这样的事情：

#div2
    width: 100% - 200px;

【参考方案1】：

取决于整体设计（如果使用浮动，您可以使用边距）

但是对于现代浏览器，还有calc() 函数。

#div2
    width: calc(100% - 200px);