5
HTML div mit height 100prozent vom Body
Hallo,
ich habe ein Problem. mein selbst gebastelter HTML Code will nich so wie ich will.
ich mache html jetzt seit drei Wochen, und habe mir eine Seite gebastelt, die einen grauen Hintergrund hat, und darauf ein roten "<div id="all">" der wiederum den gesamten Inhalt beinhaltet.
mein Code sieht so aus:
Meine Style.css sieht so aus:
ich habe ein Problem. mein selbst gebastelter HTML Code will nich so wie ich will.
ich mache html jetzt seit drei Wochen, und habe mir eine Seite gebastelt, die einen grauen Hintergrund hat, und darauf ein roten "<div id="all">" der wiederum den gesamten Inhalt beinhaltet.
mein Code sieht so aus:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Webseitentitel - Home</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="All">
<div id="title"><b>✯Antons Website✯</b></div>
<h1 style="text-align:center;font-family:;color:#300000;"> Home </h1>
<div id="line"></div>
<p></p>
<div id="MainBorder">
<div id="main">
INHALT
</div>
<div id="main">
INHALT
</div>
</div>
<div id="leftsidemenu">
<p>
ein link.<br>
noch ein link.<br>
und noch einer<br>
der vierte link!<br>
noch einer.<br>
6.<br>
</p>
</div>
<div id="footer">
FOOTER TEXT
</div>
</div>
</body>
</html>Meine Style.css sieht so aus:
html, body {
background-color: #333333;
padding: 10px;
height: 100%;
}
#All {
Width:800px;
margin:auto;
min-height:100%;
height:100%;
background-color:#b40000;
border-radius:40px;
padding:40px;
overflow: hidden !important;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#title {
color:#300000;
letter-spacing:20px;
font-size:50px;
text-align:center;
}
#main {
color:#300000;
font-size:18px;
width:560px;
font-size:14px;
border-radius:9px;
border:3px solid #BF3B19;
padding:10px;
background-color:#BF3B19;
float:left;
margin-right:9px;
margin-bottom:9px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#leftsidemenu {
width:165px;
height:300px;
padding:10px;
float:left;
background-color:#930000;
border-radius:9px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#MainBorder {
width:560px;
float:left;
margin-right:35px;
}
#footer {
color:#300000;
height:20px;
border:3px solid #BF3B19;
background-color:#BF3B19;
padding:2px;
border-radius:3px;
text-align:center;
position:absolute;
bottom:10px;
left:120px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
/* Lines */
#line {
border:1px solid #30000;
border-radius:2px
}
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 204419
Url: https://administrator.de/contentid/204419
Printed on: April 19, 2024 at 23:04 o'clock
5 Comments
Latest comment
Hallo,
siehe mal bitte hier:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html
Damit sollte deine Frage beantwortet sein
Gruß,
Florian.
siehe mal bitte hier:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html
Damit sollte deine Frage beantwortet sein
Gruß,
Florian.
Danke!
wenn ich jetzt aber einen Inhalt habe der kleiner ist, dann ist der div "All" trotzdem lang. und zwar länger als nötig. wenn du verstehst?
hat da vielleicht jemand eine Idee wie ich das machen soll?
Tschau
B-Free
wenn ich jetzt aber einen Inhalt habe der kleiner ist, dann ist der div "All" trotzdem lang. und zwar länger als nötig. wenn du verstehst?
hat da vielleicht jemand eine Idee wie ich das machen soll?
Tschau
B-Free
"all" wird immer so hoch sein, wie der body, wenn du nach dieser Regel oben gehst.
Was genau willst du denn erreichen? Eine Frage gibt es in deinem Beitrag ja leider nicht und am WE funktioniert meine Glaskugel besonders schlecht ^^
Mfg
Mitchell
Was genau willst du denn erreichen? Eine Frage gibt es in deinem Beitrag ja leider nicht und am WE funktioniert meine Glaskugel besonders schlecht ^^
Mfg
Mitchell
Hallo,
deine Glaskugel geht am WE genau so gut wie in der Woche! ich hatte kein Problem, nur eine falsche Hoffnung von dem was in dem Code zu verstehen geglaubt habe. Die Seite ist immer mindestens bis zur Unterkante des Explorers lang. ich dachte allerdings dies währe ein Fehler. War es aber nicht!
Gruß
B-Free
PS. welches Modell ist deine Glaskugel?
deine Glaskugel geht am WE genau so gut wie in der Woche! ich hatte kein Problem, nur eine falsche Hoffnung von dem was in dem Code zu verstehen geglaubt habe. Die Seite ist immer mindestens bis zur Unterkante des Explorers lang. ich dachte allerdings dies währe ein Fehler. War es aber nicht!
Gruß
B-Free
PS. welches Modell ist deine Glaskugel?
Müsste ich nachgucken, ist noch aus alten Neckermann Beständen die Kugel
Mfg
Mitchell
Mfg
Mitchell
