✔ 4 bildschirmfüllende Divs

M

Mario097

Mitglied
Hallo
bräuchte dringen Hilfe,
ich habe eine Website die aus einem Container bestehen soll der nur div´s untereinnder haben soll die so groß sind wie der Bildschirm
also 1 Div so groß wie Bildschim ^^
ca 4 Divs sollen es werden :-)

danke ^^
 
Nichts leichter als das:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title> 
    <style type="text/css">
      /* <![CDATA[ */   
      * {margin:0;padding:0} 
      div {margin:5px 0;border:thin solid #999;background:#ddd}             
      /* ]]>  */
    </style>  
  </head>
  <body>
    <div>DIV 1</div>
    <div>DIV 2</div>
    <div>DIV 3</div>
    <div>DIV 4</div>
  </body>
</html>

P.S. Deine Frage ist im CSS-Forum besser als im Programming-Forum platziert ;)


Edit: Falls bei der Größe auch die Höhe eingeschlossen sein soll:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title> 
    <style type="text/css">
      /* <![CDATA[ */   
      * {margin:0;padding:0} 
      html,body {height:100%}      
      div {height:25%}  
      #ID-1 {background:#ddd}
      #ID-2 {background:#ccc}
      #ID-3 {background:#bbb}
      #ID-4 {background:#aaa}           
      /* ]]>  */
    </style>  
  </head>
  <body>
    <div id="ID-1">DIV 1</div>
    <div id="ID-2">DIV 2</div>
    <div id="ID-3">DIV 3</div>
    <div id="ID-4">DIV 4</div>
  </body>
</html>
 
Zuletzt bearbeitet:
ok und wenn ich eine Menu leiste hab ? soll wenn ich zum ersten div scroll den ganzen bildschirm füllen wie geht das dann ? und was ist <![CDATA[ ?

Die divs sind irgendwie voll klein so 50px ?!

CSS:
CSS: 
html, body {
	height:100%;
	width:100%;
	font-size:100.01%;
	overflow-x:hidden;
	margin:0px;
	padding:0px;
}

header {
	height:250px;
	width:100%;
	background-color:#282828;
	border-bottom:1px solid #000;
}

#Div1 {
	background-color:white;
 	border-bottom:1px solid black;
	width:100%;
	height:20%;
 }
 
#Div2 {
	border-bottom:1px solid black;
	width:100%;
	height:20%;
	background-color:red;


}

#Div3 {
	background-color:white; 
	border-bottom:1px solid black;
	width:100%;
	height:20%;

}

#Div4 {
	border-bottom:1px solid black;
	width:100%;
	height:20%;
	background-color:red;
}

#Div5 {
	background-color:white; 
	border-bottom:1px solid black;
	width:100%;
	height:20%;
}
Quellcode:
HTML: 
<header>
</header>

<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
<div id="Div4"></div>
<div id="Div5"></div>
 
Nun wenn der Header 250 Pixel hoch ist und jeder DIV (laut deiner Aussage) 50 Pixel hat. Dann sind das in der Summe nochmals 250 Pixel. Alles zusammen also 500 Pixel hoch.

Wie groß/hoch ist die Seite wenn du sie anzeigst bzw. ist die Seite dann komplett gefüllt oder nicht?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück