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

Question

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

    [    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 的正确样式？

标签： htmlcss

Answer 1

您可以使用 CSS 添加固定位置来做到这一点，例如，您可以在此处查看：

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