Frage stellenUnd gleich nochmal ein ähnliches Problem.
Ein inneres div "navbox" soll 100% so hoch sein wie das äußere div "main" weil am unteren Ende der navbox immer eine Grafik angezeigt wird. Das daüberliegende div "main" hat derzeit keine Höhe aber einen Border der auch richtig angezeigt wird. Das oberste div "containerMain" beinhaltet den Schatten links und rechts als Hintergrund-Grafik. Hier der betroffene Teil:
<div id="containerMain">
<div id="main">
<div id="navbox"><div id="leftnav">Navigation</div></div>
<div id="main-inner">
<div id="content">
<div class="post">
<h2>ueberschrift</h2>
Inhalt
</div>
</div>
</div>
<div id="right"> </div>
.......
#containerMain {
width: 956px;
margin:0 auto;
height:100%;
background:url(images/layout/schattenLR.jpg) repeat-y left top;
}
#main {
width:913px;
margin:0 auto;
padding:0;
border-right:1px solid #B5AD8E;
border-left:1px solid #B5AD8E;
}
#navbox {
width:184px;
min-height: 100%;
height:auto !important;
height:100%;
float:left;
position:relative;
bottom:0;
background:url(images/blatt-nav.jpg) no-repeat 50% bottom;
background-color:#F3EDDA;
margin:0;
padding:0;
}
Die Frage: Ist es möglich in einem innern div die Höhe auf 100% zu bringen wenn ein darüberliegendes div auch schon 100% hat.
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
height 100% in verschachtelten div
8 Beiträge • Seite 1 von 1
height 100% in verschachtelten div
von fabelhaft » 19.07.2010, 11:59
- fabelhaft
- neu hier
- Beiträge: 7
- Registriert: 16.07.2010, 14:55
Re: height 100% in verschachtelten div
von sejuma » 19.07.2010, 15:09
Gib #main noch 100% Höhe oder verwende Faux Columns: http://www.ohne-css.gehts-gar.net/0005.php
- sejuma
- Vielposter
- Beiträge: 788
- Registriert: 15.07.2009, 17:46
Re: height 100% in verschachtelten div
von fabelhaft » 19.07.2010, 16:13
Das mit den #main und 100% Höhe habe ich auch schon versucht - geht nicht. Das einizige Problem das ich sehe ist genau wie du sagst das #main. Gibt man dem einen fixen Wert passt alles perfekt.
Die Faux Columns hilfen mir denke ich nicht weil ich in diesem Fall keine kachelnden Hintergrundgrafik brauche sondern die Höhe des #main div mit 100% um darin die nur für diesen Bereich gebrauchte Hintergrundfarbe verwenden zu können UND am unteren Rand ein Bild platzieren zu können.
Weisst du da noch eine andere Möglichkeit?
Die Faux Columns hilfen mir denke ich nicht weil ich in diesem Fall keine kachelnden Hintergrundgrafik brauche sondern die Höhe des #main div mit 100% um darin die nur für diesen Bereich gebrauchte Hintergrundfarbe verwenden zu können UND am unteren Rand ein Bild platzieren zu können.
Weisst du da noch eine andere Möglichkeit?
- fabelhaft
- neu hier
- Beiträge: 7
- Registriert: 16.07.2010, 14:55
Re: height 100% in verschachtelten div
von dhx » 20.07.2010, 09:40
Moin,
Hast du für html und body die Höhe auch auf 100% festgelegt?
Zusätzlich erstmal alle Abstände auf Null setzen:
Später dann ggf. wie gewünscht wieder herstellen.
Diese Angaben sollten am Anfang deiner CSS stehen.
fabelhaft:
Das mit den #main und 100% Höhe habe ich auch schon versucht - geht nicht.
Hast du für html und body die Höhe auch auf 100% festgelegt?
- Code: Alles auswählen
html, body {height: 100%;}
Zusätzlich erstmal alle Abstände auf Null setzen:
- Code: Alles auswählen
* {margin: 0; padding: 0;}
Später dann ggf. wie gewünscht wieder herstellen.
Diese Angaben sollten am Anfang deiner CSS stehen.
- dhx
- Gelegenheitsleser
- Beiträge: 15
- Registriert: 04.07.2010, 10:32
Re: height 100% in verschachtelten div
von dhx » 20.07.2010, 09:49
Edit:
Diese Angaben für die #navbox wird nicht benötigt. Zumindest sehe ich da keinen wirklichen Sinn drin.
- Code: Alles auswählen
position:relative;
bottom:0;
Diese Angaben für die #navbox wird nicht benötigt. Zumindest sehe ich da keinen wirklichen Sinn drin.
- dhx
- Gelegenheitsleser
- Beiträge: 15
- Registriert: 04.07.2010, 10:32
Re: height 100% in verschachtelten div
von fabelhaft » 20.07.2010, 12:14
Hallo dhx,
ich habe jetzt alles wie du vorgeschlagen hast gemacht und die Höhe von der leftnav wird jetzt tatsächlich auf 100% verlängert, das passt also, aber nun tritt der Content über die ihn umgebenden Elemente nach unten heraus und hat als einziges Element 100% Höhe vom Browserfenster. Wie kann ich das auf die Höhe der linken bzw rechte Spalte begrenzen?
ich habe jetzt alles wie du vorgeschlagen hast gemacht und die Höhe von der leftnav wird jetzt tatsächlich auf 100% verlängert, das passt also, aber nun tritt der Content über die ihn umgebenden Elemente nach unten heraus und hat als einziges Element 100% Höhe vom Browserfenster. Wie kann ich das auf die Höhe der linken bzw rechte Spalte begrenzen?
- Code: Alles auswählen
<div id="main-inner">
<div id="content">
<div class="post">
#main-inner {
width:530px;
min-height:100%;
height:100%;
margin:0;
padding:0;
text-align: left;
float:left;
}
#content {
position:relative;
width:510px;
height:100%;
float:left;
margin:0;
padding:5px 8px 5px 15px;
}
.post {
margin: 0;
padding:0;
}
.post p {
height:100%;
margin: 0;
padding:0;
}
.post h2 {
min-width:435px;
}
- Dateianhänge
-
- Ausschnitt linke Spalte, Content rot umrandet und Footer
- content-zu-lang.jpg (4 KiB) 1075-mal betrachtet
- fabelhaft
- neu hier
- Beiträge: 7
- Registriert: 16.07.2010, 14:55
Re: height 100% in verschachtelten div
von dhx » 21.07.2010, 05:05
Moin,
Klingt für mich so als wenn da irgendwo ein clear fehlt. Da du aber nur bruchstückhaft dein HTML bzw. CSS hier angibst, ist eine bessere Fehleranalyse schwer möglich.
fabelhaft
...aber nun tritt der Content über die ihn umgebenden Elemente nach unten heraus...
Klingt für mich so als wenn da irgendwo ein clear fehlt. Da du aber nur bruchstückhaft dein HTML bzw. CSS hier angibst, ist eine bessere Fehleranalyse schwer möglich.
- dhx
- Gelegenheitsleser
- Beiträge: 15
- Registriert: 04.07.2010, 10:32
Re: height 100% in verschachtelten div
von fabelhaft » 21.07.2010, 13:20
Hallo dhx,
ja nach diesem fehlenden clear suche ich schon eine halbe Ewigkeit und finde es nicht - ich bin wohl schon halb blind und jetzt auch am verrückt werden. Bitte um deine Hilfe.
Die html datei
und hier noch das gesamte css
ja nach diesem fehlenden clear suche ich schon eine halbe Ewigkeit und finde es nicht - ich bin wohl schon halb blind und jetzt auch am verrückt werden. Bitte um deine Hilfe.
Die html datei
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
</head>
<body>
<div id="containerStart">
<div id="headerTopLeft"></div>
<div id="headerTopCenter"></div>
<div id="headerTopRight"></div>
<div class="clearleftright"></div>
<div id="L1"></div>
<div id="headerMain">
<div id="logo"><h1><a href="index.php" title="">home</a></h1></div>
<div id="top1menu">Topnav</div>
<div class="clearleftright"></div>
</div>
<div id="R1"></div>
<div class="clearleftright"></div>
</div>
<!-- end containerStart -->
<!-- MainRow Beginn -->
<div id="containerMain">
<div id="L2"> </div>
<div id="main">
<div id="navbox"><div id="leftnav">navi</div> </div>
<div id="main-inner">
<div id="content">
<div class="post">
<h2>Uberschrift</h2>
<p>asd</p>
<p>fasd</p>
<p>as</p>
<p>fas</p>
<p>f</p>
<p>sdf</p>
<p> as</p>
<p>f</p>
<p> </p>
<p>f</p>
<p> </p>
<p>fas</p>
<p>f </p>
<p>saf</p>
<p>saf</p>
<p>s</p>
<p>fsa</p>
<p>fsa</p>
<p> </p>
<p>asf </p>
<p>safsdafasfas f</p>
<p> asf</p>
<p>as</p>
<p>fwgtrestjvh</p>
<p>j</p>
<p>46srht</p>
<p>w46drz</p>
<p>zi</p>
<p>uk</p>
<p> </p>
<p> </p>
<p>sadf</p>
<p> </p>
<p> </p>
<p>rthzhj</p>
<p> </p>
<p> </p>
<p> </p>
<p>rtz</p>
<p> </p>
<p> </p>
<p> </p>
<p>4zt</p>
<p> </p>
<p> </p>
<p>rebt</p>
<p> </p>
<p> </p>
<p> </p>
<p>rt</p>
<p>z</p>
<p> </p>
<p>rt</p>
<p>retbh</p>
<p>rbz</p>
<p> </p>
<p> </p>
<p>rbt</p>
<p>rb</p>
<p>rbert</p>
<p> </p>
<p>ENDE</p>
</div>
</div>
</div>
<div id="right">
<div id="right-inner">
<div id="sidebar">
<h2>News:</h2>
hier sind die news
<h2>Login:</h2>
<div id="sidebarlogin">loginbereich</div>
</div>
<div id="smlPic">kleines Bild</div>
</div>
</div>
</div> <!-- Ende main -->
<div id="R2"> </div>
<div class="clearleftright"></div>
</div>
<!-- MainRow Ende -->
<div id="containerFoot">
<div id="L3"> </div>
<div id="footer">Footer</div>
<div id="R3"> </div>
<div class="clearleftright"></div>
</div>
</body>
</html>
und hier noch das gesamte css
- Code: Alles auswählen
*{
margin:0;
padding:0;
}
html,body {
height: 100%;
padding:0;
margin:0;
background-color: #FFF;
font-size: 11px;
font-family: Arial, "Trebuchet MS", verdana, sans-serif;
}
body {
text-align:left;
min-width:956px; /*for mozilla*/
background-color: #FFF;
}
/* #containerStart = erster hauptcontainer*/
#containerStart {
height: 114px;
margin:0 auto 0 auto;
padding:0;
width:956px;
/*border:1px solid chartreuse;*/
}
/* oberer schmaler Teil des Headers*/
#headerTopLeft{
width:29px;
height:25px;
float:left;
background: url(images/layout/LO.jpg) no-repeat left top;
}
#headerTopCenter{
width:895px;
height:25px;
float:left;
background: url(images/layout/O.jpg) repeat-x right top;
}
#headerTopRight{
width:32px;
height:25px;
float:right;
background: url(images/layout/RO.jpg) no-repeat right top;
}
#L1 {
position:relative;
width:19px;
background: url(images/layout/L.jpg) repeat-y left top;
height:89px;
float:left;
}
#R1 {
position:relative;
width:22px;
background: url(images/layout/schattenHeaderRechts.jpg) repeat-y left top;
height:89px;
float:right;
}
/* unterer Teil des Headers zwischen L1 und R1*/
#headerMain {
position:relative;
width:913px;
height:89px;
border-right:1px solid #B5AD8E;
border-left:1px solid #B5AD8E;
margin-right:auto;
margin-left:auto;
float:left;
background: url(images/bgHeaderSub.jpg) repeat-x left top;
}
#logo {
position:relative;
top:-7px;
left:20px;
width:148px;
height:69px;
float:left;
}
#logo img {
border:none;
}
/**
*
* Mainbereich
*
**/
#containerMain { /*Speziell fuer die contenrow damit die schatten links und rechts funktionieren */
width: 956px;
margin:0 auto;
height:100%;
/*border: 1px solid #000; */
background:url(images/layout/schattenLR.jpg) repeat-y left top;
}
/* divs nebeneinander sind: L2, main, R2 */
#L2 {
width:19px;
float:left;
min-height: 100%;
height:auto !important;
height:100%;
}
#navbox {
width:183px;
min-height: 100%;
height:auto !important;
height:100%;
float:left;
background:url(images/blatt-nav.jpg) no-repeat 50% bottom;
background-color:#F3EDDA;
padding:0;
}
/*innerhalb von main sind dann: main-inner und right die zusammen den content ausmachen*/
#main {
width:913px;
float:left;
height:100%;
margin:14px 0 0 0;
padding:0;
border-right:1px solid #B5AD8E;
border-left:1px solid #B5AD8E;
}
#R2 {
width:22px;
float:right;
min-height: 100%;
height:auto !important;
height:100%;
}
#main-inner {
width:530px;
min-height:100%;
height:100%;
margin:0;
padding:0;
text-align: left;
float:left;
}
/**
* Right
*
**/
#right {
width:185px;
float:right;
margin-right:5px;
height:100%;
}
#right-inner {
height:100%;
width: 158px;
padding-left: 4px;
text-align: left;
}
#right-inner h2 {
font-size: 15px;
}
/*
************************************************************************************/
}
#content {
position:relative;
width:510px;
height:100%;
float:left;
margin:0;
padding:5px 5px 5px 15px;
/*border:1px solid HotPink;*/
}
.post {
margin: 0;
padding:0;
/*KEINE HÖHE ANGEBEN in keinem Fall*/
border:1px solid red;
}
.post p {
margin: 0;
padding:0;
}
.post h2 {
min-width:435px;
}
/*
*
* Footer Standard also nicht Startseiten
*
**/
#containerFoot {
/* border: 1px solid #000;*/
clear:both;
margin:0 auto;
padding:0;
width: 956px;
height:17px;
}
#L3 {
width:19px;
background: url(images/layout/L.jpg) repeat-y right top;
height:17px;
float:left;
}
#R3 {
width:22px;
background: url(images/layout/R_12.jpg) repeat-y left top;
height:17px;
float:right;
}
#footer {
position:relative;/*ie needs this to show float */
width:907px;
padding:3px 3px 5px 3px;
border-right:1px solid #B5AD8E; /*#F2ECD9;*/
border-bottom:1px solid #B5AD8E;
border-left:1px solid #B5AD8E;
background-color:#D8B65D;
color: #FFF;
height:11px;
float:left;
}
#footNIBE {
width:550px;
float:left;
text-align:left;
font-size:12px;
color:#A81524;
}
#footNIBE img {
vertical-align:middle;
margin-bottom:2px;
}
#footFirmenname {
width:300px;
float:right;
text-decoration: none;
font-size:12px;
font-weight:bold;
color: #FFF;
text-align:right;
letter-spacing:1px;
}
#smlPic { /*das div*/
position:absolute;
bottom:10px;
width:160px;
}
#smlPicImg { /*das bild*/
position:relative;
left:20px;
margin-left:auto;
margin-right:auto;
}
/*
*
* clear
*
**/
.clearleftright {
clear:both;
}
/* Das kurze obere Hauptmenu*/
#top1menu {
font-family: Arial, Verdana, Avant Garde, "Trebuchet MS", sans-serif;
position:relative;
top:32px;
left:40px;
float:left;
width:540px;
height:20px;
/*border:1px solid blue;*/
}
#top1menu ul {
margin: 0;
padding: 0;
}
#top1menu ul li {
margin: 0 5px;
padding: 0;
list-style: none;
float:left;
}
#top1menu ul li a, #top1menu ul li a:link{
font-size:16px;
font-weight:bold;
color:#000;
text-decoration:none;
}
#top1menu ul li a:hover, #top1menu ul li.active a {
font-size:16px;
font-weight:bold;
color:#4DAD43;
text-decoration:none;
}
- fabelhaft
- neu hier
- Beiträge: 7
- Registriert: 16.07.2010, 14:55
8 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "height 100% in verschachtelten div"
- Scrollleiste zerstört Design, height=100% klappt nicht
- 3 Spalten Layout mit height:100%
- Zwei DIV-Zeilen oben variabel unten fix bzw. min-height
- parent und child div mit 100% höhe und padding
- Positionierung von Divs, sprunghaftes verhalten
- dynamisches div mit float
- Höhe von DIVs (tabellenartig) - alter Hut :-/
Zurück zu: CSS für Fortgeschrittene
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast