CSS - 百分比宽度大小在所有分辨率下看起来都不一样答案

【问题标题】：CSS - percentage width size doesn't look the same in all resolutionsCSS - 百分比宽度大小在所有分辨率下看起来都不一样
【发布时间】：2020-06-24 12:50:38
【问题描述】：

我正在使用 react 开发日历。

日历网格是一个表格元素，其中每个单元格都包含一个 div，其中包含月份日期及其事件。多日活动应从开始之日到结束之日展开。我实现了这种行为，并使用计算出的百分比设置宽度，以便响应。该事件在全尺寸屏幕上看起来不错，但是一旦我开始缩小窗口，它就不会保持不变。应该一直到最后一天结束的事件还没到尽头，之前已经散布完几个像素。

需要做什么才能从全尺寸到所有分辨率都保持相同的外观？

编辑 1

事件组件：

const Event = ({ cellWidth, tableWidth, eventColor, styleClass, 
isTimeShown, onEventClicked, time, title, startDate, endDate, 
weekStarter, isAllDay, isMultiDay, duration }) => {

const eventRef = React.useRef<HTMLDivElement>();
const inlineStyles = isMultiDay || isAllDay ?
{ background: eventColor } :
{ borderLeft: `2px solid ${eventColor}` };
let event = getDefaultEvent({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay });

event = isMultiDay && cellWidth ? getMultiDayEvent({ cellWidth, event, 
duration }) : event;
return event;
};

默认事件：

const getDefaultEvent = ({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay }) => {
return (
<div
  ref={eventRef}
  {...style(style.Event, { isMultiDay, isAllDay })}
  style={inlineStyles}
  onClick={() => onEventClicked(time)}
>
  {isTimeShown && <div className={style.Time}>{time}</div>}
  <div className={style.Title}>{title}</div>
</div>
)
};

根据事件持续时间和 cellWidth 计算宽度的代码（我添加了 30，因为每边的单元格填充为 15px）：

const getMultiDayEvent = ({ cellWidth, event, duration }) 
=> {
const eventWidthByDuration = (((cellWidth + 30) * duration)/cellWidth) 
* 100 + '%';
const inlineStyles = { minWidth: eventWidthByDuration };
event = (
<div style={inlineStyles} className={style.MultiDay}>
  {event}
</div>)
return event;
}

事件 div css：

 .Event {
 position: relative;
 -st-states: isAllDay, isMultiDay;
 padding-left: 4px;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 overflow: hidden;
 max-width: 99%;
 }

包含事件div css的多天div：

.MultiDay {
z-index: 10;
}

编辑 2

似乎百分比宽度不是基于容器的实际宽度（边框+填充+宽度），它仅基于宽度。有没有办法实现响应实际宽度的尺寸？这样宽度计算会更容易：

const eventWidthByDuration = (duration * 100) + '%';

【问题讨论】：

请发布您的html/css代码！否则我们不知道为什么这不起作用。
不确定宽度是否正确 - 如果事件跨越两行怎么办？无论哪种方式，共享您的代码，因为您的百分比值可能与 px 或 rems (?) 不匹配
.code 放在这里。
@user0101 事件不能超过 1 行。这是百分比，我在检查时看到它。我只是不明白百分比宽度在一种尺寸上是否以某种方式看起来为什么在其他尺寸上看起来会有所不同。

标签： javascript html css reactjs

【解决方案1】：

问题是百分比单位不是基于容器的实际宽度（宽度+填充+边框），只是宽度。如果容器有box-sizing: border-box; 也无济于事，它的子宽度仍将由它的原始宽度计算。删除填充解决了大部分问题，因为边框是 1px，计算不是 100% 正确，但它要好得多（可以在图像中查看缺少 4px，每个单元格 2 个 - 内部和外部）：

（仍然保存了比例，百分比单位再次有意义......好吧：）

现在唯一缺少的是如何仍然添加填充 - 可能在不同的容器中包含正常事件......另一个问题，如果有人想到解决方案，请告诉我

【讨论】：