css 如何创建具有固定Div标题的滚动内容Div

epggiuax 于 2022-12-20 发布在其他

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

我正在尝试创建一个简单的div，其中包含以下内容：
一个top div，它只包含一个标题文本。
包含滚动内容的底部div。
有几种方法我相信我可以做到这一点，但我不确定推荐的方法是什么。
第一种是有两个同级div，例如：https://codepen.io/Sean713/pen/dyjyVga

<div class = 'wrapper'>
  <div 
    class='header'>I am the header
  </div>
  <div class='content'>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
  </div>
</div>

.header {
  background-color: lightgrey;
  height: 100px;
}

.content {
  background-color: grey;
  height: 100px;
  overflow-y: scroll;
}

第二种方法是嵌套它们并使用类似position: fixed;的代码：https://codepen.io/Sean713/pen/KKBKXEm
一个二个一个一个
但是这不是最好的，因为标题是透明的，当我们滚动时，我可以看到标题后面的内容。但是它似乎有一个更好/更自然的设计，因为标题在整个内容块内部。
对于这类事情，有没有标准的做法或推荐的方法？

css

来源：https://stackoverflow.com/questions/74852396/how-to-create-scrolling-content-div-with-fixed-div-header

1条答案

按热度按时间

cetgtptt1#

对我来说，我发现最好的解决方案是给第一个div position:fixed，然后给它一个背景来隐藏后面的文本，这是非常简单的，工作完美。这里有一个例子：

* {
   margin:0;
   padding:0;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    height:45px;
    background: transparent;
    width: 100%;
    /*You can get rid of these styles*/
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #eee;
}
.content {
    position:fixed;
    top:45px;
    left:0;
    width: 100%;
    height: 100vh;
    overflow-y:scroll;
    /*You can get rid of these styles*/
    background: #eee;
}
.height {
    height:1000px;
    /*You can get rid of these styles*/
    background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Draw-1-black-line.svg/1200px-Draw-1-black-line.svg.png);
    background-size:50px;
    background-repeat:repeat;
}

<header>Some Header Text :D</header>
<div class="content">
    <div class="height">
        <!-- this just to give some height for scrolling -->
    </div>
</div>

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何创建具有固定Div标题的滚动内容Div

1条答案

相关问题

热门标签

最新问答