css已知一侧高度另一侧自适应

CSS中实现一侧固定高度，另一侧自适应布局，通常可以利用`flexbox`、`grid`或者传统的`float`技术结合百分比宽度来完成。这里以`flexbox`为例：

1. 使用Flexbox布局：
如果容器设置为`display: flex;`，并且你希望左侧固定高度（例如`.fixed-height`），右侧自适应(`auto`宽度)，可以这样做：

   .container {
     display: flex;
   }
   .left-side {
     width: 30%; /* 或者其他百分比 */
     height: 100px; /* 固定高度 */
     background: #f00; /* 简单示例 */
   }
   .right-side {
     flex-grow: 1; /* 自动填充剩余空间 */
     background: #0f0; /* 另一侧背景色 */
   }

2. 如果左右两侧需要都是固定宽度，你可以用传统的`display: inline-block`配合百分比计算：

   .container {
     width: 100%;
   }
   .half-width {
     width: 50%;
   }
   .fixed-left {
     width: 50%;
     height: 100px;
     background: #f00;
   }
   .variable-right {
     width: calc(100% - 100px); /* 减去左边固定高度 */
     background: #0f0;
   }