4. Div ohne, oder mit verschobener Scrollbar

Div ohne, oder mit verschobener Scrollbar

  • C

    Hallo!

    Ich arbeite an einer Website dessen Layout ich nochmal überarbeiten möchte.
    Die details des Layouts erspaare ich euch. Egal wie ich es Drehe, ich stoße immer auf das gleiche Problem:

    http://s27.postimg.org/3txsjg7n6/layout2.jpg

    Ich habe eine Seite die das Browserfenster zu 100% ausfüllt, mit festem Footer.(Easy, Das ist nicht das Problem)
    Der Inhalt der Seite spiel sich in einem Zentralen Div ab, welches scrollbar sein muss. Allerdings möchte ich die Scrollbar nicht im Div haben.
    Entweder soll die Scrollbar unsichbar sein (soll soweit ich weiß nicht gehen) oder aber einfach am äußeren Rand wie auf dem Bild sein.

    Der Grund für dieses Layout ist, das ich Links und Rechts neben diese 3 Divs 2 Side Elemente setzen möchte, die IMMER sichtbar sein sollen. Egal wie weit ich runter scrolle, diese Divs müssen immer im Bild sein.
    Für mich einzig logischer weg -> Alles ist so gemacht das es die Seite ausfüllt, und der Content alleine ist scrollbar.

    Aktuelles HTML

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="HTML5, Website, Beispiel, Seite" />
<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
<link rel="icon" href="favicon.ico"  />
<link href="css/css.css" type="text/css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="wrap">
	<div class='main'>
		<div class='head'>
		 <span style='color:#ddd;'>Site Ele 1 (head) [Just another Div Fixed size, dont care about this]</span>
		</div>

		<div class='content'>
		Site Ele 2 (cont) [If overflow, scrollarea only inside this div. The scrollbar should be outside like on this image]
		</div>
	</div>
</div>
<div class='footer'>
Site Ele 3 (footer) [Allways stays right here, <b>Never</b> leaves visible area]
</div>
</body>
</html>

    ----------------------------------------------------------------
	Anfang:		Body und html Formatierung
*/

	*				{
					margin:0;
					padding:0;
					}
	html			{
					height: 100%;
					margin: 0;
					padding: 0;
					}
	body			{
					background: url("../img/bg8.jpg") center top;
					background-attachment: fixed;
					font-family: "verdana";
					font-size: 10px;
					height: 100%;
					margin: 0;
					padding: 0;
					overflow-y: scroll;
					}
	* html body, html {
					height: 100%;
					}
/*
	Ende:		Body und html Formatierung
----------------------------------------------------------------
	Anfang:		Aufbau / Footer Realisierung
*/
	.wrap			{
					background: #181818;
					position: relative;
					width: 790px;
					height: auto;
					min-height: 100%;
					margin: 0 auto 0 auto;
					border-right: solid 1px #101010;
					border-left:  solid 1px #101010;
					}
	*html #wrap		{
					height: 100%;
					}
	body > #wrap 	{
					height: auto;
					min-height: 100%;
					}
	.main			{
					position: relative;
					clear: both;
					width: 100%;
					height: 100%;
					padding-bottom: -30px;
					}
	.warp > #main	{
					height: auto;
					min-height: 100%;
					}
	.footer			{
					background: #2a2e31;
					padding-top: 0px;
					padding-left: 10px;
					position: relative;
					clear: both;
					width: 780px;
					height: 30px;
					margin: -30px auto 0 auto;
					color: #FFFFFF;
					}
    0
  • C

    Habs selbst herrausgefunden.
    Falls es jemanden Interessiert:

    Man könnte es so lösen:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="HTML5, Website, Beispiel, Seite" />
<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
<link rel="icon" href="favicon.ico"  />
<link href="css/css.css" type="text/css" rel="stylesheet">
<title></title>
</head>
<body>
<div class='main'>
	<div class='leftsidediv'>
		<div class='leftsidedivTop'>
		</div>
		<div class='leftsidedivFeed'>
		</div>
	</div>
	<div class='page'>
		<div class='pageTop'>
			<div class='pageBody'>
				<div class='pageHead'>
				</div>
				<div class='pageContent'>
					<div style='background: #888888; width: 790px;'>dd</div>

				</div>
			</div>
		</div>
		<div class='pageFeed'>

		</div>	
	</div>
	<div class='rightsidediv'>
		<div class='rightsidedivTop'>
		</div>
		<div class='rightsidedivFeed'>
		</div>	
	</div>
</div>
</body>
</html>

    *						{
							margin:						0;
							padding:					0;
							}
	html					{
							height: 					100%;
							margin: 					0;
							padding: 					0;
							}
	body					{
							background: 				url("../img/bg8.jpg") center top;
							background-attachment: 		fixed;
							font-family: 				"verdana";
							font-size: 					10px;
							height: 					100%;
							margin: 					0;
							padding: 					0;
							}
	* html body, html 		{
							height: 					100%;
							}
/*
	Ende:		Body und html Formatierung
----------------------------------------------------------------
	Anfang:		Aufbau / Footer Realisierung
*/						
	.main 					{
							clear:						both;
							height: 					100%;
							width:						1392px;
							background: 				#202020;
							margin:						0 auto 0 auto;
							}
	.leftsidediv			{
							float:						left;
							width:						300px;
							height:						100%;
							background: 				#181818;
							}
	.page 					{
							float:						left;
							height:						100%;
							width:						790px;
							background: 				#442222;
							border-right: 				solid 1px #101010;
							border-left:  				solid 1px #101010;	
							}
	.rightsidediv			{
							float:						right;
							width:						300px;
							height:						100%;
							background: 				#181818;
							}
	.leftsidedivTop			{
							width:						300px;
							height:						100%;
							}
	.leftsidedivFeed		{
							width:						300px;
							height:						500px;
							margin-top: 				-500px;
							}
	.pageTop				{
							width:						790px;
							/*height:						auto;
							min-height: 				100%;*/
							height:						100%;
							padding-bottom: 			-30px;
							background: 				#334422;
							}
	.pageBody				{
							width:						790px;
							height:						100%;
							background:					#772020;
							}
	.pageHead				{
							background: 				url("../img/head1.jpg"); background-repeat:no-repeat; center top; /* repeat-y */
							width: 						100%;
							height: 					170px;
							}
	.pageContent			{
							width:						790px;
							height:						calc(100% - 200px);
							overflow-y: 				scroll;
							overflow-x:					hidden;
							padding-right: 				30px;
							}
	.pageFeed				{
							width:						790px;
							height:						30px;
							margin-top: 				-30px;
							background: 				#222244;
							}
	.rightsidedivTop		{
							width:						300px;
							height:						100%;
							}
	.rightsidedivFeed		{
							width:						300px;
							height:						500px;
							margin-top: 				-500px;
							}
    0
Anmelden zum Antworten