Hallo,
das mit der Statuszeile konnte ich bei mir nicht nachvollziehen.(FF in Ubuntu) ich habe mal die Paddingwerte bis auf Body auskommentiert. Vielleicht liegt es daran. Das andere von dir beschriebenes Problem ist abgestellt.
Scrollbars übersteuern ihren eigenen Div-Container (Lösung bitte ohne JavaScript)
-
-
Warum gekomme ich Scrollbars, wenn ich hinter dem Body-Bereich <form> einfüge, aber nicht wenn ich es hinter <header> und <main> einfüge
Ist das bei euch auch so!
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>HOMEPAGE</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing:border-box; } body { padding:0; display: flex; flex-direction: column; width: 100vw; height: 100vh; justify-content: space-between; background: lightgreen; } header h2 , header nav { text-align:center; } main { display:flex; height:100vh; overflow:hidden; } .dropdown , .status , .output , .file , footer , nav , h2 { margin:0 0 5px 0; border:1px solid #000; background:#fff; } .left , .right { display:flex; justify-content: space-between; flex-direction: column; } .left { margin-right:5px; width: auto; } .right { width:100vw; overflow:hidden; } .file , .output { overflow:auto; display:flex; height:100vh; } .file , .dropdown , .status { white-space:nowrap; } .output { white-space:pre; } .output { padding:0; background: lightgreen; } .output div { padding:0; background:#fff; } .output p { background:#fff; } </style> </head> <body> <FORM target="_self" action="" method="post"> <header> <nav> <p> HEADLINE </p> </nav> </header> <main> <p> TEXT1 </p> </main> </FORM> </body> </html> -
Lass dir dein Projekt vom Fachmann realisieren.