flexbox: Design mit festem horizontalem Menü und Footer

grossmaggul · 21 April 2020, 17:02:05

Hallo,

ich habe mir mittels flexbox ein Tabletoberfläche gebaut, sie besteht aus einem horizontalen Hauptmenü, Inhalt und einer horizontalen Fussleiste.

Code Auswählen

<!DOCTYPE html>
<html>

<!-- FHEM Tablet UI 2.6 -->

<head>
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->
    
   <!-- <link rel="stylesheet" href="css/fhem-tablet-ui.css" /> -->
   <!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
   <!-- <link rel="stylesheet" href="/fhem/www/tablet/css/user-tablet-ui.css" /> -->
   <link rel="stylesheet" href="lib/font-awesome.min.css" />
   <link rel="stylesheet" href="lib/jquery.toast.min.css" />
   <script src="js/fhem-tablet-ui.js" defer></script>
    
   <!-- eigene CSS Anpassungen -->
   <link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-custom.css" />
<!--   <link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" /> -->
 	
    <title>SmartHome</title>
</head>

<body>
    
 <div class="vbox">
    
	
    <div class="hbox items-left" style="height: auto;">    
        
				<div data-type="pagebutton" data-url="#content_home.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_home"
                    data-text-align="left"
                    data-active-pattern="(.*index.html|.*#content_home.html)"
                    data-icon="fa-home"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="default normal nocache">
                </div>
			
				<div data-type="pagebutton" data-url="#content_wetter.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_wetter"
                    data-text-align="left"
                    data-active-pattern=".*(#content_wetter.html)"
                    data-icon="mi-cloud"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache">
                </div>
			
 
			
			
				<div data-type="pagebutton" data-url="#content_licht.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_licht"
                    data-text-align="left"
                    data-active-pattern=".*(#content_licht.html)"
                    data-icon="fa-lightbulb-o"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache"></div>
			
            	<div data-type="pagebutton" data-url="#content_heizung.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_heizung"
                    data-text-align="left"
                    data-active-pattern=".*(#content_heizung.html)"
                    data-icon="oa-sani_heating"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache"></div>
			
            
           
				<div data-type="pagebutton" data-url="#content_mm_wz.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_mm_wz"
                    data-text-align="left"
                    data-active-pattern=".*(#content_mm_wz.html)"
                    data-icon="oa-scene_livingroom"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache"></div>
			
            
				<div data-type="pagebutton" data-url="#content_mm_bz.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_mm_bz"
                    data-text-align="left"
                    data-active-pattern=".*(#content_mm_bz.html)"
                    data-icon="oa-scene_cinema"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache"></div>
			
				<div data-type="pagebutton" data-url="#content_system.html"
                    data-color="white"
                    data-active-color="blue"
                    data-width="20"
                    data-load="#content_system"
                    data-text-align="left"
                    data-active-pattern=".*(#content_system.html)"
                    data-icon="oa-message_service"
                    data-background-icon="none"
                    data-on-color="lightblue"
                    data-off-color="#aaaaaa"
                    class="prefetch nocache"></div>
			
            
		
    </div>
	
        <div class="page" id="content_home"></div>
        <div class="page" id="content_wetter"></div>
        <div class="page" id="content_licht"></div>
        <div class="page" id="content_heizung"></div>
        <div class="page" id="content_mm_wz"></div>
        <div class="page" id="content_mm_bz"></div>
        <div class="page" id="content_system"></div>
	
    <!-- Statuszeile -->
    <div class="hbox items-left" style="height: auto;">
         <div data-template="templates/template_statuszeile.html"></div>
    </div>
</div>

</body>
</html>

Der Inhalt befindet sich in diesem Konstrukt:

Code Auswählen


<!DOCTYPE html>
<html>
<body>
 <div class="page" id="content_home">
		

    <div class="hbox">

--->>> Inhalt 3 Spalten <<<---

    </div>

</div>

Im Browser sieht das gut aus, aber wenn ich es auf dem Tablet anzeigen lasse, verschwinden je nach Umfang des Inhaltes, sowohl das Menü, als auch der Footer und ich komme dann an das Menü nicht mehr ran, es lässt sich nicht nach oben scrollen.

yersinia · 22 April 2020, 08:40:34

Du könntest die Seite so umbauen, dass
- die Elemente relativ groß (zB width: xx%;) sind oder
- sie genau auf das Tabletformat zugeschnitten ist (und im Browser am PC aa aussieht) oder
- einige Elemente fixed oder sticky werden

grossmaggul · 22 April 2020, 13:17:38

Danke, ich habe das jetzt mal Punkt 1 & 3 ausprobiert, das funktioniert aber auch nicht, position hilft zwar, wenn gescrollt wird, bei Größenänderungen aber nicht unbedingt.
Punkt 2 würde ja eigentlich dem Konzept von Flexbox widersprechen, oder?

yersinia · 22 April 2020, 13:33:51

Zitat von: grossmaggul am 22 April 2020, 13:17:38
Danke, ich habe das jetzt mal Punkt 1 & 3 ausprobiert, das funktioniert aber auch nicht, position hilft zwar, wenn gescrollt wird, bei Größenänderungen aber nicht unbedingt.
Punkt 2 würde ja eigentlich dem Konzept von Flexbox widersprechen, oder?

Jaein imho; es kommt auf das Element an. Meines Verständnisses nach, willst du einige sachen fix haben (Menu, footer), den rest flexibel. Ich würde versuchen, menu und footer fix zu positionieren und den rest als flexbox, da wirst du aber auf den einzelnen Objekten, wahrscheinlich via inline-CSS oder eigenen class, definieren müssen. Siehe auch hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Oder den Scrollbalken erzwingen.

grossmaggul · 22 April 2020, 14:10:39

ZitatMeines Verständnisses nach, willst du einige sachen fix haben (Menu, footer), den rest flexibel.

Ja, genauso.

Dann werde ich mich nochmal ein wenig in flex einlesen, ich hatte mich bis jetzt nur an diesem https://wiki.fhem.de/wiki/FTUI_Layout_Flex orientiert.

yersinia · 22 April 2020, 16:28:35

In dem Wiki Artikel wird auch auf diese Seite verwiesen: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Schau dir mal dort unter Beispiele das Holy-Grail-Layout-Beispiel an.

grossmaggul · 22 April 2020, 17:53:30

Super, Danke, da werde ich mich mal durchwursteln.