• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Height Prozentangabe funktioniert nicht

Nightloewe

Neues Mitglied
Hallo,
Undzwar funktioniert auf meiner Seite bei einem DIV die Height nicht und das nur, wenn ich Prozentangaben und keine Pixelangaben dafür nutze. Ich hoffe ihr könnt mein Problem lösen. Das DIV das nicht mit der Height funktioniert ist die Sidebar links, die etwas grau ist.
Meine Website

CSS-Code:
Code:
a { text-decoration: none; color: #403A3A; }
a:hover { color: #4D89BA; }

html, body {
  height:100%;
}
body {
margin: 0;
padding: 0;
font-family: Arial;
background-image: URL(wallpaper.jpg);
background-attachment: fixed;
}
#page-wrapper {
margin: 0;
padding: 0;
width:960px;
margin: 0 auto;
background-color: #403A3A;
}
#logo-wrapper { margin: 0; padding: 0; width:960px; margin: 0 auto; }
#page {
width: 960px;
margin: 0 auto;
background-color: white;
height: 0px;
}
#main-wrapper, #breadcrumb, #container { background-color: white; }
#navigation {
background-color: #1E84A6;
width: 100%;
height: 60px;
}
#navigation ul {
display: inline-block;
}
#navigation a {
font-size: 16px;
text-decoration: none;
color: #BDBDBD;
padding-top: 20px;
padding-bottom: 21px;
padding-right: 10px;
padding-left: 10px;
position: relative;
top: 4px;
transition: 0.5s ease-in-out 0s;
}
#navigation a:hover {
color: white;
background-color: #0B6B8B;
}
#secondary-menu {
border-left: 1px solid #D8D8D8;
}

#content,
#sidebar-first,
#sidebar-second {
  float: left;
  display: block;
  position: relative;
  height: 100%;
}

#sidebar-first, #sidebar-second { background-color: #F2F2F2;}

.sidebar {
display: inline-block;
height: 100%;
}
#main {
height: 100%;
}
#content {
  width: 100%;
}
body.sidebar-first #content {
  width: 80%;
  left: 20%; /* LTR */
}
body.sidebar-second #content {
  width: 80%;
}
body.two-sidebars #content {
  width: 60%;
  left: 20%;
}

#sidebar-first {
  width: 20%;
  left: -80%; /* LTR */
}

body.two-sidebars #sidebar-first {
  height: 100%;
  left: -60%; /* LTR */
}

#sidebar-second {
  float: right; /* LTR */
  width: 20%;
}
.section {
  margin: 10px;
}
#footer { background-color: #403A3A; padding: 5px;
-webkit-box-shadow: inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         inset 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #403A3A;
}
input[type=text] { webkit-appearance: none; border-radius: 0px; border: 2px solid #D8D8D8; box-shadow: none; margin-bottom: 5px; padding: 5px; }
input[type=password] { webkit-appearance: none; border-radius: 0px; border: 2px solid #D8D8D8; box-shadow: none; padding: 5px; }
input[type=text]:hover { border: 2px solid grey; }
input[type=password]:hover { border: 2px solid grey; }
input[type=text]:focus { border: 2px solid #4D89BA; }
input[type=password]:focus { border: 2px solid #4D89BA; }
input[type=button] { webkit-appearance: none; border-radius: 0px; border: 1px solid #8EBDD9; background-color: #2F7299; padding: 5px; box-shadow: none; color: white; }
input[type=submit] { webkit-appearance: none; border-radius: 0px; border: 1px solid #8EBDD9; background-color: #2F7299; padding: 5px; box-shadow: none; color: white; width: 100%; }
 
Werbung:
Hallo,

herzliches Beileid zur divitis und gute Besserung.

Ich hoffe ihr könnt mein Problem lösen.

Nein, leider nicht. Dein Problem ist das fehlende Grundlagenwissen und das wirst du schon selbst lernen müssen.

Du willst der Navigation eine Höhe von 100% geben. Aber wovon?

Woher soll der Browser wissen, was du mit den 100% meinst? Um die 100% zu verteilen, benötigt die Navigation ein umgebendes Element mit einer festen Größe. Das fehlt bei dir aber.

Wenn du das praktisch ausprobieren willst trage in die layout.css folgende Angabe ein:

Code:
#main-wrapper { height: 1000px; }

Dann kann der Browser die 100% auf die 1000px verteilen und legt auch los.

Dein Problem wird dadurch verstärkt, das du XHTML benutzt. Das ist bereits 2006 offiziell begraben worden und wird seitdem nicht mehr weiter entwickelt.

Wenn du die festen height mit px-Einheit nicht haben willst bleibt dir mit XHTML nur so zu tun, als ob die beiden Container gleich hoch wären. Google mal nach "div gleiche höhe" oder "faux column".

Gruss

MrMurphy
 
Sowas geht auch
Code:
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
 margin:0;
 padding:0px;
}

#wrapper {
 width:90%;
 margin:0 auto;
 background:#ddd;
 overflow:hidden;
}

#header {
 background:#dad;
}
#col1 {
 width:30%;
 float:left;
}

#col2 {
 margin-left:30%;
 background:#eed;
}

#col2:after {  /* Somit ist col2 immer die längste Spalte */
 content:"";
 display:block;
 clear:both;
}

#footer {
 background:#dad;
 clear:both;
}

h1 , h3 {
 padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="header"><h1>Homepage</h1></div>
 <div id="col1"><h3>Spalte 1</h3></div>
 <div id="col2"><h3>Spalte 2</h3></div>
 <div id="footer"><h3>Footer</h3></div>
</div><!--/wrapper-->
</body>
</html>
 
Werbung:
Zurück
Oben