Javascript Html/css侧栏未正确显示在页面的右侧

我想用HTML和CSS创建一个显示在页面右侧的侧栏，但float:right无法正常工作，当我删除position:fixed并将其更改为relative时，高度会变小。我怎样才能在右边创建准确的侧边栏？我希望它也能响应。 以下是侧边栏代码：

.side-drawer {
    height: 100%;
    background-color: #463f4f;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width:60%;
    max-width: 300px;
    z-index: 200;
    float: right;
    position: fixed;
}

const sideDrawer = props => (
  <nav className='side-drawer'>
    {/* add routers later */}
    <ul>
      <li><a href='/'>داشبورد</a></li>
      <li><a href='/'>اطلاعات پایه</a></li>
      <li><a href='/'>بیمه تکمیلی</a></li>
      <li><a href='/'>آموزش</a></li>
      <li><a href='/'>مدیریت عملکرد</a></li>
      <li><a href='/'>اطلاعات مالی</a></li>
      <li><a href='/'>بازخورد</a></li>
    </ul>
  </nav>
)

尝试：

并删除此代码：

Float:right;

如果将“位置”设置为“固定”，则需要将“显示”设置为“块属性”。

请尝试：

并删除此代码：

Float:right;

---

如果将“位置”设置为“固定”，则需要将“显示”设置为“块属性”。

将CSS更改为：

.侧抽屉{ 身高：100%； 背景色：463f4f； 盒影：2px0px5pxRGBA0,0,0.5； 排名：0； 右：0； 宽度：60%； 最大宽度：300px； z指数：200； 位置：固定； 显示：块； }

---

浮动：对；应该移除，因为您使用的是固定位置。另外，左边应该是右边：0，因为您希望它位于文档的右边。

将CSS更改为：

.侧抽屉{ 身高：100%； 背景色：463f4f； 盒影：2px0px5pxRGBA0,0,0.5； 排名：0； 右：0； 宽度：60%； 最大宽度：300px； z指数：200； 位置：固定； 显示：块； }

---

浮动：对；应该移除，因为您使用的是固定位置。另外，左边应该是右边：0，因为您希望它位于文档的右边。

您不需要使用float。如果你做的位置：固定；然后确保正确的位置为零

.包装纸{ 位置：相对位置； } .身体{ 宽度：70%； 身高：100%； 填充：20px； } .右侧边栏{ 宽度：25%； 填充：20px； 位置：固定； 右：0； 排名：0； 身高：100%； } 文件 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人，除依序继承人外，其他继承人，包括未继承人和未继承人 蒂亚。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。

家 项目 服务 关于 康塔克

---

您不需要使用float。如果你做的位置：固定；然后确保正确的位置为零

.包装纸{ 位置：相对位置； } .身体{ 宽度：70%； 身高：100%； 填充：20px； } .右侧边栏{ 宽度：25%； 填充：20px； 位置：固定； 右：0； 排名：0； 身高：100%； } 文件 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人e 除同侧副作用外，其他副作用的副作用是指包括在软组织中的新的副作用。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，可选。Lorem ipsum dolor sit amet，建筑精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。 Lorem ipsum dolor sit amet，奉献精英。发明人（不包括同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天的同一天。建筑师，选择权。

家 项目 服务 关于 康塔克

---

万一您需要更精细、更一致的控制，我建议您学习并使用CSS Flexbox。更高级的需求可以使用

然后，您的代码变成：

.布局{ 显示：flex；/*使用flexbox*/ 对齐项目：拉伸；/*垂直拉伸*/ 对齐内容：拉伸；/*水平拉伸*/ } .集装箱{ flex:1自动；/*将首先拉伸和压缩，从任何开始*/ 填充：20px； } .餐具柜{ flex:0 300px；/*将不会拉伸或压缩，并将从300px开始*/ 背景色：463f4f； 盒影：-2px05pxRGBA0,0,0,0.5； 颜色：白色； 字体大小：16px； 填充：20px； } 内容在这里 {/*以后添加路由器*/}

---

我还调整了长方体阴影，使其位于另一侧

如果您需要更精细、更一致的控制，我建议您学习并使用CSS Flexbox。更高级的需求可以使用

然后，您的代码变成：

.布局{ 显示：flex；/*使用flexbox*/ 对齐项目：拉伸；/*垂直拉伸*/ 对齐内容：拉伸；/*水平拉伸*/ } .集装箱{ flex:1自动；/*将首先拉伸和压缩，从任何开始*/ 填充：20px； } .餐具柜{ flex:0 300px；/*将不会拉伸或压缩，并将从300px开始*/ 背景色：463f4f； 盒影：-2px05pxRGBA0,0,0,0.5； 颜色：白色； 字体大小：16px； 填充：20px； } 内容在这里 {/*以后添加路由器*/} 我还调整了长方体阴影，使其位于另一侧