Hier wird gescrollt

// Mindesthöhe bei relative, NONE bei absolut Scrollbalken ... ... relative: blatt_main AUS overflow-y: hidden container_site_scroller AN overflow-y: visible ... absolute: blatt_main AN overflow-y: visible container_site_scroller AUS overflow-y: hidden blatt_main Dies ist mit LESS leicht möglich. In LESS steht folgende Zeile, die in .css3 leider so nicht vorkommt. @flexible_height: relative; VIELLEICHT DOCH BESSER RUNTER? */ .flexible_height { /* Für .css lass ich mal als Hinweis im Quelltext drin. Vielleicht klappt es mit !important. Ansonsten stehen die entscheidenden Deklarationen ganz unten. position: absolute !important; // 1. Fall Höhe von aussen bestimmt position: relative !important; // 2. Fall Höhe durch Inhalt bestimmt */ } /* Wenn die ganze Seite gescrollt werden soll, aber nicht BODY. Die Scrolleiste liegt dann u.U. unter dem header_div. */ #container_site_scroller { position: absolute; z-index: -1; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow-x: visible; overflow-y: visible; overflow: visible; /* beg debug */ border: 0px dotted green !important; /* end debug */ } .c_width { /* Weite und u.U. die Position! (left:10%; right: 20%) in Verbindung mit ... ... #container_horizontal ... #header_container_horizontal Wenn die Position und Weite vom Blatt und Header gleich sein sollen. */ position: absolute; } @media only screen and (min-width: 0px) { .c_width { left: 0%; right: 0%; max-width: 100%; } } @media only screen and (min-width: 576px) { .c_width { left: 3%; right: 3%; max-width: 100%; } } @media only screen and (min-width: 992px) { .c_width { left: 16em; right: 1em; max-width: 100%; } } @media only screen and (min-width: 1200px) { .c_width { /*Weite indirekt durch left und right gesetzt: */ left: 15.5em; right: 1em; max-width: 100%; } } /* ------------------------------------------------------------------ */ /* Das container_div wird hier absolut sein. (KEIN scroll nach unten )*/ /* ------------------------------------------------------------------ */ #container_horizontal { /* In Verbindung mit c_width Dient NUR für HORIZONTALE Werte: Positionierung und Breite. NICHT für vertikale Werte. Schon gar nicht für die Höhe. Das funktioniert nicht (richtig). Probier gar nicht weiter rum !!! */ position: absolute; z-index: -1; top: 0px; bottom: 0px; /* beg debug */ /* end debug */ } #container_vertical { /* div zum VERTIKALEN Positionieren (Weite orientiert sich an #container_horizontal) */ position: absolute; z-index: -1; left: 0px; right: 0px; top: 1rem; bottom: 1rem; /* beg debug */ border: 0px dotted white !important; /* end debug */ } #container_div { /* */ position: absolute; position: relative; z-index: 0; left: 0px; right: 0px; top: 0px; bottom: 0px; /* beg debug */ border: 0px solid red !important; /* end debug */ } /* -------------------------------------------------------------------------------------------------------- */ /* MAIN DIVS */ #leftside_under_div { visibility: hidden; position: absolute; left: -50px; width: 50px; height: 100%; top: 0px; bottom: 0px; /* beg debug */ /* end debug */ } #rightside_under_div { visibility: hidden; position: absolute; right: -50px; width: 50px; height: 100%; top: 0px; bottom: 1px; /* beg debug */ /* end debug */ } #blatt_div { position: absolute; position: relative; left: 0px; right: 0px; width: 100%; height: 100%; top: 0px; bottom: 0px; /* beg debug */ border: 0px dotted gray; /* end debug */ } #leftside_above_div { visibility: hidden; position: absolute; left: -50px; width: 50px; height: 100%; top: 0px; bottom: 0px; /* beg debug */ /* end debug */ } #rightside_above_div { visibility: hidden; position: absolute; right: -50px; width: 50px; height: 100%; top: 0px; bottom: 1px; /* beg debug */ /* end debug */ } /* -------------------------------------------------------------------------------------------------------- */ /* Frames der Inhaltsboxen (leftside_under_div, ...) Sie definieren die Elemente des "Blattes" ... ... den Hintergrund (durch .class="bg_content_frame") ... einen Rahmen ... Abstand zum Inhalt ... die Schatten (durch .class="shadowXy") ... jedoch NICHT die Größe */ #leftside_under_frame { /* possible: border, shadow, ... */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ border: 1px dotted blue; background-color: rgba(40, 0, 80, 0.14); /* end debug */ } #rightside_under_frame { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border: 1px dotted blue; background-color: rgba(40, 0, 80, 0.14); } #leftside_above_frame { /* possible: border, shadow, ... */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ border: 1px dotted blue; background-color: rgba(40, 0, 80, 0.14); /* end debug */ } #rightside_above_frame { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border: 1px dotted blue; background-color: rgba(40, 0, 80, 0.14); } #blatt_frame { /* possible: border, shadow, ... */ position: absolute; position: relative; top: 0px; right: 0px; bottom: 0px; left: 0px; height: auto; padding: 0 1em 0 1em; background: url(images/bg_content.png) repeat scroll center top; background: url(images/bg_body.png); /* relativ zum .css */ background-position: right top; /* Oben Rechts */ background-size: cover; /* Das ganze Bild */ background-repeat: no-repeat; /**/ background-attachment: fixed; /**/ background: none repeat scroll 0% 0% rgba(45, 45, 45, 0.7); border: 1px solid gray; 1overflow-y: scroll; /* Scrollbar innerhalb des Blattes im Zusammenspiel mit "content_text"! Bsp 1 - 20px Rand: padding: 20px; // 20px Rand zum Inhalt, ABER ... padding-right: 10px; // ... padding right NUR 10px wegen des scrollbar! */ 1padding: 20px; 1padding-right: 10px; /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ /* end debug */ } #blatt_header { margin-top: 1em; padding-bottom: 1em; } #blatt_main { position: absolute; position: relative; overflow-y: hidden; overflow-x: hidden; top: 00px; right: 00px; bottom: 00px; left: 00px; /* Ränder um das GESAMTE Blatt (blatt_main_header und blatt_main_content) */ /* Bsp1.: 20px Ränder um das gesamte Blatt. margin: 20px; padding: 0px; kontolliert aus // Summe rechter Rand soll sein 20px (s.o.)) margin-right: 5px; // d.h. wenn ein scrollbar erscheint, hat er einen Abstand von 5px nach rechts und ... padding-right: 15px; // der Inhalt hat einen Abstand von 15px zum scrollbar. // Abstand OHNE scrollbar 20px aber MIT 20px plus Breite scrollbar! */ margin: 0px; padding: 0px; margin-right: 0px; padding-right: 0px; /* End Ränder */ 1position: relative; 1width: auto; 1height: 100%; 1margin: 0; /* beg debug */ border: 0px dotted black; text-align: justify; /* end debug */ } #blatt_main_frame { position: relative; } #blatt_main_header { margin-right: -10px; overflow-y: visible; /* beg debug */ /* end debug */ } #blatt_left { /* Mögliches Menü links */ visibility: hidden; /*not used yet */ visibility: visible; position: absolute; top: 0px; right: auto; bottom: 0px; left: 0px; position: relative; float: left; width: auto; height: 100%; /* beg debug */ margin: -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ border: 1px dotted black; /* end debug */ } #blatt_left_frame { /* Mögliches Menü links */ visibility: hidden; /*not used yet */ visibility: visible; position: absolute; top: 0px; bottom: 0px; left: 0px; position: relative; float: left; right: auto; height: 100%; 1margin: 0; padding-right: 10px; overflow-x: auto; overflow-y: auto; background-color: #111111; /* beg debug */ /* end debug */ } #blatt_right { /* Mögliche Inhalte rechts */ visibility: hidden; /*not used yet */ visibility: visible; position: absolute; top: 0px; right: 0px; left: auto; bottom: 0px; left: 0px; position: relative; float: left; width: auto; height: 100%; padding-right: 10px; overflow-x: auto; overflow-y: auto; /* beg debug */ /* end debug */ } #blatt_right_frame { /* Mögliches Menü links */ visibility: hidden; /*not used yet */ visibility: visible; position: absolute; top: 0px; bottom: 0px; left: 0px; position: relative; float: left; right: auto; height: 100%; 1margin: 0; padding-right: 10px; overflow-x: auto; overflow-y: auto; /* beg debug */ /* end debug */ } #blatt_main_content { padding-left: 0px; padding-right: 0px; min-height: 70vh; /* beg debug */ border: 0px dotted black; text-align: justify; /* end debug */ } #blatt_main_footer { position: relative; left: 0px; right: 0px; height: auto; display: flex; padding-left: 1em; padding-right: 1em; padding-top: 1em; padding-bottom: 1em; margin-top: 1em; /* beg debug */ /* end debug */ } /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------- */ /* DESIGN */ /* Element Klassen */ .content_block01 { position: relative; right: 0; left: 0; width: 96%; height: auto; display: inline-block; padding: 10px; border: 0px dotted black; } .content_block01 img { position: relative; display: block; height: auto; width: 100%; margin: 0 auto 0 auto; } /* #Media Queries ================================================== */ /* Überlegungen: @media queries sind css3, also neue Browser. Tablets und Smartphones verstehen das hoffentlich alle. (Kleine Schreens) Alte Browser sind hoffentlich nur auf alten Rechnern zu finden -> große screens !? */ /* Daten der Seite: left: 160 text: 790 randR: 10 (Schatten) sum: 960 (Container) -> Unter 960 -> links weg. left: --- text: 790 randR: 10 (Schatten) sum: 800 (Container) */ /* *** <= 1023px *** Smaller than standard 1024 (devices and browsers) */ /* IE8/9 funktioniert nicht. Denke an "alte Browser -> große screens" */ @media only screen and (max-width: 20cm) { #container_div { position: absolute; left: 1px; /* beg debug */ /* end debug */ } #leftside_div { display: none; } #content_div { /* Wird responsible */ width: auto; /* */ left: 0; /* <----- linker Rand */ right: 0; /* */ /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ 1border: 1px dotted yellow; /* end debug */ } #header_container { /* Container für Inhalte */ 1width: 959px; /* <------------ Breite (c_width)*/ /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ 1border: 1px dotted yellow; /* end debug */ } #header_nav_frame { left: 90px; /* logo hat 5+ 80px +5 */ /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ 1border: 1px dotted yellow; /* end debug */ } #header_breadcrumb_frame { /* Rahmen, Schatten, Abstände, ... */ left: 90px; /* */ /* beg debug */ 1margin: -1px -2px -2px -1px; /* t r b l border Xpx ausgleichen. NUR wenn oben KEIN margin-xyz ist */ 1border: 1px dotted yellow; /* end debug */ } } /* end @media only screen and (max-width: 959px) {*/ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TABLET/SMARTPHONES size to 640 (devices and browsers) */ /* */ /* SPEZIAL NAVBAR */ @media only screen and (max-width: 10cm) { #leftside_div { display: none; } #content_div { /* Wird responsible */ width: auto; /* */ top: 0px; left: 0; /* <----- linker Rand */ right: 0; /* */ /* beg debug */ /* end debug */ } /* HEADER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Verstecken und neuen header_div_hh einsetzen */ #1header_div { visibility: hidden; } #1header_div_hh { visibility: visible; } /* HEADER HANDHELD - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* SET SPEZIAL TABLET/SMARTPHONE MENU -> in p_menu.css */ } /* end @media only screen and (max-width: 640px) { */