我怎樣才能得到div nav擴展下來或有高度相同的父母div（容器）？如何獲得一個div來調整其高度以適合容器？

<!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

簡單的方法

你可以同時與資產淨值的top和bottom屬性設置爲0和position: absolute實現這一目標。將容器設置爲position: relative。

See how this is done

在這篇文章的底部，有院長愛德華茲的IE7（和IE8）JS庫的鏈接，你應該包括IE6遊客。它是一個JS庫，當你包含它時，實際上使IE6的行爲與IE7（或8）相似。甜！ ......當然有它的錯誤，但至少你知道如何處理它們。

Dean Edwards' IE7 and 8 JS libraries

現代的方式（實現Flexbox）

IE11 +以及所有現代瀏覽器都支持Flexbox的。

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

.child { 
    flex-grow: 1; 
}

來源

2009-08-05 00:52:15 kmiyashiro

你可能會想用以下聲明：

height: 100%;

這將div的高度設置爲它的容器高度的100％，這將使其填補父DIV 。

來源

2009-08-04 23:08:54

您可能需要指定容器的高度，然後將導航的高度設置爲100％。

編輯：有一個快速瀏覽，看起來高度屬性適用於父母的高度，所以你確實需要設置容器的高度。

注意：將body元素的高度設置爲100％只會將其縮放到瀏覽器窗口的高度。其中goeds在一個頁面的任何內容不會有相同的背景等

來源

2009-08-04 23:09:06 schubySteve

這可以工作，但我不想爲容器固定高度。 ; | – ParoX 2009-08-04 23:17:03

關於NB：不會最小高度：100％;幫助這個 – ParoX 2009-08-04 23:23:18

@Brian，可以試試看。 – schubySteve 2009-08-04 23:28:53

不幸的是，沒有實現這一點的傻瓜式的方法。如果塊沒有浮動，塊只會擴展到其容器的高度。浮動塊被視爲文檔流之外。

不使用JavaScript來完成以下操作的一種方法是通過名爲仿真列的技術。

它基本上涉及將background-image應用於浮動元素的父元素，這使得您相信這兩個元素是相同的高度。

的更多信息可在：

A List Apart: Articles: Faux Columns

來源

2009-08-05 00:54:07

另一個

一個簡單的方法是存在的。你不需要在CSS中編寫更多代碼。只需包含一個java腳本並在腳本中輸入div「id」，就可以獲得相同的列高度，以便您可以將高度放到容器中。它適用於主流瀏覽器。

源代碼：

<!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>

可以包括任何沒有的div在此腳本。

ddequalcolumns.columnswatch = [ 「NAV」，「內容」]

修改在上述線其足夠。

試試這個。

來源

2009-08-06 15:44:46

我有同樣的問題，我解決了它使用一些JavaScript。

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

來源

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>

來源

2013-08-16 12:28:21 Lasithds

如果招用position:absolute，position:relative和top/left/bottom/right: 0px不適合你的情況，你可以嘗試：

#nav { 
    height: inherit; 
}

這個工作對我們的網頁之一，雖然我不知道到底需要什麼其他條件才能成功！

來源

2013-11-25 16:28:17 joeytwiddle

如何獲得一個div來調整其高度以適合容器？

回答

簡單的方法

現代的方式（實現Flexbox）

相關問題