Question

尝试创建固定位置的侧面导航栏（仅用于高度）

尝试固定位置，但与内容重叠。使用此创建的侧边栏 https://reacttraining.com/react-router/web/example/sidebar

<div style={{ display: "flex" }}>
        <div
          style={{
            padding: "20px",
            width: "20%",
            background: "black",
            height:"100vh",
            position:"fixed",


          }}
        >

我认为导航栏是固定的，但不会与其他内容重叠。

Answer 1

只需添加document.body.style.marginLeft = "20%";。如果侧边栏在左侧

Answer 2

在侧边栏添加flex：1，然后在其后的其余div上添加flex 2。

示例代码：

<div style="display: flex">
  <div style="flex: 1"> This is sidebar </div>
  <div style="flex: 3"> This is content </div>
</div>

flex中的数字与列的宽度有关。

Answer 3

请在css下方使用并检查，因为内部div是动态生成的，我通过使用子选择器应用了css

        #root > div > div:first-child{
            padding: 10px;
            width: 40%;
            background: rgb(240, 240, 240);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            overflow: auto;
        }
        #root > div > div:nth-child(2){
            flex: 1 1 0%;
            padding: 10px;
            width: 58%;
            margin-left: 41.5%;
        }

如何使侧边栏仅在高度上固定？

3 个答案: