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

Configuration Frontend
1

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

f1c5d3bf5a7922309e13cf5bd2c560b99a90ad28
f1c5d3bf5a7922309e13cf5bd2c560b99a90ad281932×877 31.4 KB

so that it is at the same height when browsing:

graphic

7a3fa873de3e9538437f58b53ee58fa0793f5634
7a3fa873de3e9538437f58b53ee58fa0793f56341942×1000 119 KB

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

2

maybe this will help you - google about “sticky”

3

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…

4

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.

5

Thank you, i got it!

grafik
grafik1916×1024 57.1 KB

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
6

It doesn’t seem to be working properly:

grafik
grafik1907×898 48.1 KB

Can I make it bigger and in the middle?