css 修复标题并滚动其余内容

t98cgbkg 于 2023-11-19 发布在其他

关注(0)|答案(2)|浏览(110)

我想把一个标题和一个内容的div在容器的div。标题的div，（它没有一个已知的恒定高度）应该留在容器的顶部。内容的div低于标题的div，它不应该溢出容器。在溢出的情况下，只有内容的div应该滚动。
请看这张照片：

的数据
这就是我所尝试的：

<div class="container">
    <div class="title">title</div>
    <div class="content">
        a very long content...
    </div>
</div>

字符串
CSS：

.container{
    width: 300px;
    height: 500px;
}
.title{
    background-color: gray;
}
.content{
    height: 100%;/*which is obviously wrong*/
    overflow: auto;
}

型
我不想用JS做这个。

css

来源：https://stackoverflow.com/questions/31279480/fixing-a-title-and-scroll-the-rest-of-content

2条答案

按热度按时间

plupiseo1#

为了让溢出工作，你必须给内容div给予一个高度。下面是一个JSFiddle，它看起来像你想要的，尽管为了让它更动态，你可能想看看JavaScript。

.container{
  width: 300px;
  height: 500px;
}
.title{
  height: 1em;
  background-color: gray;
  line-height:1em;
  text-align:center;
  border:1px solid black;
}
.content{
  height:400px;
  overflow: auto;
  padding:10px;
  border:1px solid black;
}

字符串
我还添加了一些样式来匹配您的图片。
http://jsfiddle.net/m0pum906/

赞(0）回复(0）举报 2023-11-19

kx5bkwkv2#

我建议你在CSS中添加position：fixed到你的容器类中。

.container{
    position:fixed;
    width: 300px;
    height: 500px;
}

字符串
希望这对你有帮助：）

赞(0）回复(0）举报 2023-11-19

我来回答

css 修复标题并滚动其余内容

2条答案

相关问题

热门标签

最新问答