html - 始终可见的带有列表的菜单组件

标签 html css

您好,我想要一个由三部分组成的分离式菜单组件,它的页眉和页脚始终在页面上可见。让我们考虑一下我们有几个可供选择的选项列表,如果它们太多,它们是可滚动的,以便页脚始终可见,就像在智能手机上的许多菜单中一样:

    [    HEADER    ] --> always visible on top
      [   Title  ]
    [--------------]

    [---OPTIONS----] --> scrollable if screen is too small
      [Select 1  ]
      [Select 2  ]
      [Select 3  ]
      [Select 4  ]
      [Select n  ]
    [--------------]

    [    FOOTER    ] --> always visible on bottom
      [  Apply   ]
      [  Cancel  ]
    [--------------]

你能告诉我这些可能垂直堆叠的 div 的正确样式吗?

最佳答案

你可以通过 CSS 添加固定位置来做到这一点,你可以在这里看到例如:

https://www.w3schools.com/howto/howto_js_sticky_header.asp

关于html - 始终可见的带有列表的菜单组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58569564/

相关文章:

html - <a> inside <li> 不会链接到页面,但会与 anchor 一起使用

html - 同一行上的两个 div block

Css 列魔法

javascript - 希望使用 Javascript 创建响应式淡入淡出的标题效果

javascript - 在表单中输入数字时显示按钮

html - 表格布局为 : fixed; and how to make one column wider 的表格

javascript - 图像上的标题文字

css - 基于鼠标功能,在具有相同类的多个 "li"标签中仅显示一个 "li"

javascript - 带有对话泡泡的聊天窗口 - html

javascript - 我应该如何在 reactJS 中使用 css?