英文:
Scrollable blocks in static one
问题
我有一个静态的不可滚动的登录页面，其中包含可滚动的卡片。我将overflow: hidden;属性添加到父元素，将overflow: scroll;属性添加到子元素，但这些块仍然不移动。也许你知道我错在哪里？
我希望.child块在.parent块保持静态的同时可以滚动。
.parent {
position: fixed;
overflow: hidden;
left: 0;
top: 50px;
width: 100%;
height: calc(100% - 50px);
}
.child {
overflow: scroll;
}
<div class="parent">
<div class="child">
*内容*
</div>
<div class="child">
*内容*
</div>
</div>
英文:
I have a static non-scrollable landing page and to scrollable cards in it. I add property overflow: hidden; to parent and overflow: scroll; to child, but these blocks still don't moving. Maybe you know where am I wrong?
I want to .child blocks be scrollable while .parent block is static.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
position: fixed;
overflow: hidden;
left: 0;
top: 50px;
width: 100%;
height: calc(100% - 50px);
}
.child {
overflow: scroll
}
<!-- language: lang-html -->
<div class="parent">
<div class="child">
*content*
</div>
<div class="child">
*content*
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
你正在朝着正确的方向前进。只需为子元素设置一个特定的高度并放置内容，以便可以滚动。
.child {
overflow: scroll;
height: 100px;
/* 在标有"*content*"的位置放置任何固定高度的内容 */
}
英文:
You are going to the right direction. Just set a specific height to the child and put content so that you can scroll.
.child {
overflow: scroll;
height: 100px;
/*Put any fixed height you want and put content where it is written "*content*" */
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论