Hallo Zusammen.
ich bin am verzweifeln mit css.
Ich habe ein Design erstellt, welches 3 Header enthält (Header für Text, Header für Logo und Header für Benutzerinfos) eine Navigationsbar an der linken Seite und einenen Content bereich. Jetzt möchte ich die Höhe der Navigationsbar und die Höhe des Contents berechnen lasse, sodass min-height folgendes ergibt.
min-height: 100% - header1.height - header3.heigth;
Und gleichzeitig möchte ich berechnen, wie breit der Content sein darf (width= 100% - navbar.width)
Im Anhang ein Screenshot zur Verdeutlichung
Hier der HTML Code
HTML
<html>
<head>
<title>Hier steht der Titel</title>
<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<div id="wrapper">
<!-- Logo -->
<div id="logo">
<img src="images/logo.jpg">
</div>
<!-- Header -->
<div id="header">
Reporter
</div>
<!-- User Informationen -->
<div id="userinfo">
</div>
<!-- Navigation -->
<div id="navbar">
<ul>
<li>Neuer Bericht</li>
<li>Bericht löschen</li>
<li>Bericht ändern</li>
<li>Bericht anzeigen</li>
<li>Alle Berichte anzeigen</li>
<li>Home</li>
</ul>
</div>
<!-- Content -->
<div id="content">
<ul>
<li>Neuer Bericht</li>
<li>Bericht löschen</li>
<li>Bericht ändern</li>
<li>Bericht anzeigen</li>
<li>Alle Berichte anzeigen</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>Hier der CSS Code
CSS
body
{
/*background: #000000;*/
background: transparent;
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
h1
{
font-size: 36px;
text-align: center;
color: #ffffff;
padding-top: 100px;
}
h2
{
font-size: 20px;
text-align: center;
color: #ffffff;
}
#login
{
color: #ffffff;
width: 200px;
margin-left: 30%;
}
table
{
color: #ffffff;
}
/*-------------------------------------------------------------- */
#wrapper
{
width:device-width;
}
#logo
{
width: 100%;
background: transparent;
text-align: right;
position: absolute;
}
#logo img
{
width: 30%;
min-width: 300px;
}
#header
{
height: 15%;
min-height: 85px;
width: 100%;
background: #000000;
text-align: left;
color: #ffffff;
font-size: 36px;
}
#userinfo
{
height: 25px;
width: 100%;
background: #555555;
}
#navbar
{
position:absolute;
height:auto !important;
width: 18%;
background: #00ff00;
}
#navbar ul
{
list-style-type: none;
margin-top: 50px;
margin-left: -30px;
line-height: 2;
}
#content
{
position:absolute;
height: 100%;
width: 82%;
background: #ff0000;
left:18%;
}
/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}Kann mir jemand bitte Helfen?