Wie kann ich die div nav zu erweitern oder haben die Höhe der gleichen wie seine Eltern div (Container)?Wie bekomme ich ein div, um seine Größe zu ändern, um in den Container zu passen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px; 
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 


<div id=container> 
    <div id=nav> 
     <ul> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

2009-08-04 ParoX

einfachen Weg

Sie dies erreichen können mit der Einstellung sowohl die top und bottom Attribute des nav zu 0 und den position: absolute. Setzen Sie den Container auf position: relative.

See how this is done

An der Unterseite dieses Artikels gibt es einen Link zu Dean Edwards' IE7 (und IE8) js Bibliothek, die Sie für den IE6 Besucher enthalten sollte. Es ist eine JS-Bibliothek, die IE6 tatsächlich wie IE7 (oder 8) verhält, wenn Sie es einschließen. Süss! ... natürlich gibt es Bugs, aber zumindest weißt du, wie man damit umgeht.

Dean Edwards' IE7 and 8 JS libraries

Moderne Way (Flexbox)

IE11 + und alle modernen Browser unterstützen Flexbox.

.container { 
    display: flex; 
    flex-direction: column; 
} 

.child { 
    flex-grow: 1; 
}

Quelle

2009-08-05 00:52:15 kmiyashiro

Sie müssen auch "position: absolute" auf dem Nav selbst einstellen. Das wird in dem Artikel erwähnt, aber ich dachte, es wäre gut, es hier zu erwähnen. – Muhd

@Muhd aktualisierte Antwort – kmiyashiro

Sie wahrscheinlich die folgende Erklärung gehen zu wollen, verwenden:

height: 100%;

Dies wird die div Höhe auf 100% seiner Container Höhe, die es den div Eltern füllen machen gesetzt .

Quelle

2009-08-04 23:08:54

Sie müssen möglicherweise die Höhe des Containers angeben und dann die Höhe des Nav auf 100% einstellen.

Edit: hatte einen schnellen Blick um und es scheint, dass die Höhe Eigenschaft für die Eltern Höhe gilt, so dass Sie in der Tat müssen die Container Höhe.

Hinweis: Wenn Sie die Höhe des Körperelements auf 100% setzen, wird es nur auf die Höhe des Browserfensters skaliert. Alle Inhalte, die sie über eine Seite goeds den gleichen Hintergrund nicht haben usw.

Quelle

2009-08-04 23:09:06 schubySteve

Das funktioniert, aber ich wollte keine feste Höhe für den Container. ; | – ParoX

In Bezug auf NB: würde nicht min-Höhe: 100%; Hilfe dieses – ParoX

@Brian, könnte es ausprobieren. – schubySteve

Leider gibt es keine narrensichere Möglichkeit, dies zu erreichen. Ein Block wird nur auf die Höhe seines Containers erweitert, wenn er nicht schwebt. Floated-Blöcke werden außerhalb des Dokumentflusses betrachtet.

Eine Möglichkeit, Folgendes ohne JavaScript zu tun, ist eine Technik namens Faux-Columns.

Es beinhaltet im Grunde eine background-image auf die übergeordneten Elemente der floated Elemente anwenden, die Sie glauben macht, dass die beiden Elemente die gleiche Höhe haben.

Weitere Informationen finden Sie unter:

A List Apart: Articles: Faux Columns

Quelle

2009-08-05 00:54:07

Dies ist, was ich jetzt habe, ich versuche, es zu beseitigen. – ParoX

Eine weitere einfache Methode, die es gibt. Sie müssen nicht mehr in CSS codieren.Wenn Sie nur ein Java-Skript einfügen und die div "id" in das Skript eingeben, können Sie die gleiche Höhe der Spalten erhalten, so dass Sie die Höhe an den Container anpassen können. Es funktioniert in gängigen Browsern.

Source Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px;  
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 

<script language="javascript"> 
var ddequalcolumns=new Object() 
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists: 
ddequalcolumns.columnswatch=["nav", "content"] 

ddequalcolumns.setHeights=function(reset){ 
var tallest=0 
var resetit=(typeof reset=="string")? true : false 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null){ 
if (resetit) 
document.getElementById(this.columnswatch[i]).style.height="auto" 
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest) 
tallest=document.getElementById(this.columnswatch[i]).offsetHeight 
} 
} 
if (tallest>0){ 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null) 
document.getElementById(this.columnswatch[i]).style.height=tallest+"px" 
} 
} 
} 

ddequalcolumns.resetHeights=function(){ 
this.setHeights("reset") 
} 

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) 
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype 
if (target.addEventListener) 
target.addEventListener(tasktype, functionref, false) 
else if (target.attachEvent) 
target.attachEvent(tasktype, functionref) 
} 

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load") 
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize") 


</script> 

<div id=container> 
    <div id=nav> 
     <ul> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

können Sie jede in diesem Skript nicht von divs enthalten.

ddequalcolumns.columnswatch = [ "NAV", "Inhalt"]

in der obigen Zeile seines genug ändern.

Versuchen Sie es.

Quelle

2009-08-06 15:44:46

Ich hatte das gleiche Problem, ich löste es mit etwas Javascript.

<script type="text/javascript"> 
var theHeight = $("#PrimaryContent").height() + 100; 
$('#SecondaryContent').height(theHeight); 
</script>

Quelle

2012-07-10 08:19:11

-2

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#top, #bottom { 
    height: 100px; 
    width: 100%; 
    position: relative; 
} 
#container { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 
#container .left { 
    height: 550px; 
    width: 55%; 
    position: relative; 
    float: left; 
    background-color: #3399FF; 
} 
#container .right { 
    height: 100%; 
    position: absolute; 
    right: 0; 
    left: 55%; 
    bottom: 0px; 
    top: 0px; 
    background-color: #3366CC; 
} 
</style> 
</head> 

<body> 
<div id="top"></div> 
<div id="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 
<div id="bottom"></div> 
</body> 
</html>

Quelle

2013-08-16 12:28:21 Lasithds

-1 Ihr Code könnte diese Frage perfekt beantworten, aber ich bin viel zu faul, ihn in einen Bereich zu kopieren, in dem ich ihn sehen kann. Also, [Geige] (http://www.jsfiddle.com/) Ihre Antwort und beschreiben, was es tut. – bishop

Wenn der Trick position:absolute verwenden, position:relative und top/left/bottom/right: 0px für Ihre Situation nicht angemessen ist, könnten Sie versuchen:

#nav { 
    height: inherit; 
}

Dieses auf einer unserer Seiten gearbeitet, obwohl ich nicht sicher bin, genau welche anderen Bedingungen waren nötig, um erfolgreich zu sein!

Quelle

2013-11-25 16:28:17 joeytwiddle

Wie bekomme ich ein div, um seine Größe zu ändern, um in den Container zu passen?

Antwort

einfachen Weg

Moderne Way (Flexbox)

Verwandte Themen