Scrollbars übersteuern ihren eigenen Div-Container (Lösung bitte ohne JavaScript)

djheke

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.

http://www.gipspferd.de/forumhilfe/dm.htm

halloICKEbins

Das sieht ja schon ganz gut aus... ich werde es morgen mal komplett einbinden und dann mal schauen wie es aussieht!

Wie bekomme ich jetzt trotzdem die Abstände (paddings) hin?

halloICKEbins

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

<!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>

Alles anzeigen

djheke

Lass dir dein Projekt vom Fachmann realisieren.

Tags