Header and footer, always the same space between them for “content”

Hello everyone,

I would like to make a header and a footer for different views, and always have the same space between them, regardless of how high the cards are:

the footer should be at the bottom:

graphic

so that it is at the same height when browsing:

graphic

The space in between should then simply be black.

I tried using the layout card, but I can’t get it to work…

Regards, Stephan

maybe this will help you - google about “sticky”

Thanks for the tip, but is it possible that this only works with the Mushroom Chips Card?

type: horizontal-stack
card_mod:
  style: |
    ha-card { --chip-background: none; }
    :host {
      z-index: 2;
      position: fixed;
      bottom: 0
    }
cards:
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:music
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-music/ubersicht
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:information-outline
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-information/ubersicht
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:gauge-low
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-diagnose/ubersicht
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:chart-line
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-statistik/ubersicht
    styles:
      icon:
        - color: "#383838"
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:devices
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-gerate/ubersicht
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:cogs
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/lovelace-einstellungen/ubersicht
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    entity: light.living_room_lights
    icon: mdi:home
    color: auto
    tap_action:
      action: navigate
      navigation_path: http://192.168.178.66:8123/home-floorplan/erdgeschoss

this did not work…

Not using mushrooms - but this is wrong

since the vertical/horizontal-stack card (& grid card) does not have a ha-card & thus needs a mod-card, check docs for card-mod.

Thank you, i got it!

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    #root { 
      justify-content: center;
    }

    ha-card { --chip-background: none; }
    :host {
      z-index: 0;
      position: fixed;
      bottom: 0
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:music
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-music/ubersicht
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:information-outline
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-information/ubersicht
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:gauge-low
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-diagnose/ubersicht
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:chart-line
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-statistik/ubersicht
      styles:
        icon:
          - color: "#383838"
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:devices
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-gerate/ubersicht
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:cogs
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/lovelace-einstellungen/ubersicht
    - type: custom:button-card
      color_type: blank-card
    - type: custom:button-card
      color_type: blank-card
    - type: custom:button-card
      color_type: blank-card
    - type: custom:button-card
      entity: light.living_room_lights
      icon: mdi:home
      color: auto
      tap_action:
        action: navigate
        navigation_path: http://192.168.178.66:8123/home-floorplan/erdgeschoss

It doesn’t seem to be working properly:


Can I make it bigger and in the middle?