hi möchte gerne einem div eine Prozent Zuweisung machen in der Höhe. Doch dies geht nicht. Es geht darum, ich habe 5 divs untereinander. Und der letzte div soll mit background-Color befüllt werden. Sprich der letzte Frei platz soll mit der background-Color befüllt werden. bekomm es einfach nicht hin. 4 Div's bekommen eine Farbe. Und der letzte Div soll einfach mit einer Hintergrundfarbe befüllt werden. Sprich der leere weiße Platz soll mit Farbe befüllt sein. Hab es mit Px probiert bzw. sobald ich Prozent angaben mache geht es nicht.
Css
Code:
<!DOCTYPE html>
<html lang = "de">
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "./css/smartphone/480.css" media = "screen and (min-device-width: 1px) and (max-device-width: 480px)">
<link rel = "stylesheet" href = "./css/smartphone/1024.css" media = "screen and (min-device-width: 481px) and (max-device-width: 1024px)">
<link rel = "stylesheet" href = "./css/desktop/desktop.css" media = "screen and (min-device-width: 1025px)">
</head>
<body>
<div id = "container">
<div id = "main">
<div id = "links" style = "float: left;">
<div style = "height: 170px; background-color:#ECECEC;">
</div>
<div style = "height: 100px; background-color:#2DAB66;">
</div>
<div style = "height: 130px; background-color:#ECECEC;">
</div>
<div style = "height: 100px; background-color:#1E788B;">
</div>
</div>
<div id = "rechts" style = "float: right;">
<div style = "height: 170px; background-color:#ECECEC;">
</div>
<div style = "height: 100px; background-color:#2DAB66;">
</div>
<div style = "height: 130px; background-color:#ECECEC;">
</div>
<div style = "height: 100px; background-color:#1E788B;">
</div>
<div style = "height: 252px; background-color:#ECECEC;">
</div>
</div>
<div id = "mitte" style = " position: absolute; ">
mittedasf sf safsf asdf
</div>
</div>
</div>
</body>
</html>Css
Code:
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-color: white;
width: auto;
height: 100%;
overflow: auto;
}
#main {
width: 100%;
min-height:100%;
overflow: fixed;
height: auto;
}
#links {
width:15%;
border-style: solid;
border-color: red;
border-width: 0px;
min-height:100%;
height: auto;
position: absolute;
}
#mitte {
left: 15%;
width: 70%;
border-style: solid;
border-color: blue;
border-width: 0px;
min-height:100%;
height: auto;
}
#rechts {
width: 15%;
border-style: solid;
border-color: yellow;
border-width: 0px;
min-height:100%;
height: auto;
position: absolute;
left: 85%;
}
Zuletzt bearbeitet:
