css 使左侧导航菜单变为全尺寸时出现问题

yftpprvb 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(129)

我正在尝试做一个基本布局，左侧菜单，右侧内容和顶部标题，滚动与页面。内容在右侧也应该滚动与主滚动条。
我的（* 对我来说无法解决 *）问题开始了，当我想左边是全尺寸（高度100%），因为在某些情况下，我想从中减去头部。
这个例子（https://jsfiddle.net/5q42xvwu/）更容易解释。我只想让文本“TOP SIDER”和“BOTTOM SIDER”始终显示在屏幕上，而不管标题是否显示在屏幕上。因此，**左侧应该根据标题是否可见来更改大小。
我不知道CSS是否能做到这一点，也不知道它是如何做到的。我已经知道JS很容易做到这一点。
我希望有人能帮我解决这个问题，我已经在这上面浪费了好几个小时了。谢谢：）
这里的代码（在小提琴）：

<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: red;
        }

        .main {
            background-color: green;
            display: flex;
            flex-direction: row;
        }

        .sider {
            width: 200px;
            background-color: cornflowerblue;
            height: 100vh; /* I think here is the problem */
            position: sticky;
            top:0;
            align-self: flex-start;
        }

        .inner-sider {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="header">Header</div>
<div class="main">
    <div class="sider">
        <div class="inner-sider">
            <div>TOP SIDER</div>
            <div>BOTTOM SIDER</div>
        </div>
    </div>
    <div class="content">
        MAIN CONTENT
<!--        SIMULATE A LAGE CONTENT PAGE-->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        END OF MAIN CONTENT
    </div>
</div>
</body>
</html>

**编辑以进一步澄清：**两个内部的<div>只是代表“内部”的顶部和下部。在真实的的例子中，应该有一个完整的高度菜单，而不是“.inner-sider”。

css

来源：https://stackoverflow.com/questions/75261874/problem-when-making-left-side-navigation-menu-full-size

1条答案

按热度按时间

643ylb081#

增加了类和粘性定位到顶部和底部边。希望它不会打破你的内容布局!

body {
  margin: 0;
  padding: 0;
}

.header {
  background-color: red;
}

.main {
  background-color: green;
  display: flex;
  flex-direction: row;
}

.sider {
  width: 200px;
  background-color: cornflowerblue;
  height: 100vh; /* I think here is the problem */
  position: sticky;
  top: 0;
  align-self: flex-start; 
}


.inner-sider {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* new styles below: */
.inner-top {
  position: sticky;
  top: 0;
}

.inner-bottom {
  position: sticky;
  bottom: 0;
}

<html>
<head>
   
</head>
<body>
<div class="header">Header</div>
<div class="main">
    <div class="sider">
        <div class="inner-sider">
            <div class="inner-top">TOP SIDER</div>
            <div class="inner-bottom">BOTTOM SIDER</div>
        </div>
    </div>
    <div class="content">
        MAIN CONTENT
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>END OF MAIN CONTENT
    </div>
</div>
</body>
</html>

赞(0）回复(0）举报 2023-02-01

我来回答

css 使左侧导航菜单变为全尺寸时出现问题

1条答案

相关问题

热门标签

最新问答