How can I get the div nav to have expand down or have the height the same as it's parent div (container)?
如何让div nav向下扩展，或者与父div (container)相同?
<!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>
8 个解决方案
#1
26
Simple Way
You can achieve this with setting both the top and bottom attributes of the nav to 0 and the position: absolute. Set the container to position: relative.
您可以通过将导航的顶部和底部属性设置为0和位置:absolute来实现这一点。将容器设置为相对位置。
看看这是怎么做到的
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet! ... of course there are bugs with it, but at least you know how to deal with them.
在这篇文章的最后，有一个链接到Dean Edwards的IE7(和IE8) js库，你应该为IE6的访问者提供这个链接。它是一个JS库，当你包含IE7(或8)时，它实际上使IE6表现得像IE7。甜蜜的!…当然有错误，但至少你知道如何处理它们。
Dean Edwards' IE7 and 8 JS libraries
Dean Edwards的IE7和8js库
Modern Way (Flexbox)
IE11+ and all modern browsers support flexbox.
IE11+和所有现代浏览器都支持flexbox。
.container {
display: flex;
flex-direction: column;
}
.child {
flex-grow: 1;
}
#2
4
you would possibbly need to specify the height of container and then set the nav's height to 100%.
您可能需要指定容器的高度，然后将nav的高度设为100%。
Edit: had a quick look around and it seems that the height property applies to the parents height so you will indeed need to set the containers height.
编辑:快速浏览一下，似乎高度属性适用于父级高度，所以您确实需要设置容器的高度。
NB: setting the height of the body element to 100% only scales it to the height of the browser window. Any content which goeds over one page will not have the same background etc.
NB:将body元素的高度设置为100%，只将其缩放到浏览器窗口的高度。任何内容在一页之上都不会有相同的背景。
#3
2
Unfortunately, there is no fool-proof way of achieving this. A block will only expand to the height of its container if it is not floated. Floated blocks are considered outside of the document flow.
不幸的是，没有万无一失的方法可以实现这一点。一个块只有在不浮动时才会膨胀到容器的高度。浮动块被认为在文档流之外。
One way to do the following without using JavaScript is via a technique called Faux-Columns.
不使用JavaScript的一种方法是通过一种叫做“Faux-Columns”的技术。
It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.
它主要涉及到对浮动元素的父元素应用背景图像，这使您相信这两个元素的高度是相同的。
More information available at:
更多信息:
A List Apart: Articles: Faux Columns
列出的清单:文章:人造专栏。
#4
1
Another one simple method is there. You don't need to code more in CSS. Just including a java script and entering the div "id" inside the script you can get equal height of columns so that you can have the height fit to container. It works in major browsers.
还有一个简单的方法。您不需要在CSS中编写更多代码。只要包含一个java脚本并在脚本中输入div“id”，就可以得到相同的列高度，这样就可以使高度适合容器。它在主要的浏览器中工作。
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>
You can include any no of divs in this script.
您可以在这个脚本中包含任何div。
ddequalcolumns.columnswatch=["nav", "content"]
ddequalcolumns。columnswatch =(“导航”、“内容”)
modify in the above line its enough.
在上面一行修改就足够了。
Try this.
试试这个。
#5
1
I had the same issue, I resolved it using some javascript.
我也有同样的问题，我用一些javascript解决了它。
<script type="text/javascript">
var theHeight = $("#PrimaryContent").height() + 100;
$('#SecondaryContent').height(theHeight);
</script>
#6
1
If the trick using position:absolute, position:relative and top/left/bottom/right: 0px is not appropriate for your situation, you could try:
如果使用位置:绝对位置:相对位置:相对位置/上/左/下/右:0px不适合您的情况，您可以尝试:
#nav {
height: inherit;
}
This worked on one of our pages, although I am not sure exactly what other conditions were needed for it to succeed!
这是我们的一个页面，虽然我不确定它需要什么其他条件来成功!
#7
0
You probably are going to want to use the following declaration:
您可能想要使用以下声明:
height: 100%;
高度:100%;
This will set the div's height to 100% of its containers height, which will make it fill the parent div.
这将把div的高度设置为其容器高度的100%，这将使它填充父div。
#8
-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>
#1
26
Simple Way
You can achieve this with setting both the top and bottom attributes of the nav to 0 and the position: absolute. Set the container to position: relative.
您可以通过将导航的顶部和底部属性设置为0和位置:absolute来实现这一点。将容器设置为相对位置。
看看这是怎么做到的
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet! ... of course there are bugs with it, but at least you know how to deal with them.
在这篇文章的最后，有一个链接到Dean Edwards的IE7(和IE8) js库，你应该为IE6的访问者提供这个链接。它是一个JS库，当你包含IE7(或8)时，它实际上使IE6表现得像IE7。甜蜜的!…当然有错误，但至少你知道如何处理它们。
Dean Edwards' IE7 and 8 JS libraries
Dean Edwards的IE7和8js库
Modern Way (Flexbox)
IE11+ and all modern browsers support flexbox.
IE11+和所有现代浏览器都支持flexbox。
.container {
display: flex;
flex-direction: column;
}
.child {
flex-grow: 1;
}
#2
4
you would possibbly need to specify the height of container and then set the nav's height to 100%.
您可能需要指定容器的高度，然后将nav的高度设为100%。
Edit: had a quick look around and it seems that the height property applies to the parents height so you will indeed need to set the containers height.
编辑:快速浏览一下，似乎高度属性适用于父级高度，所以您确实需要设置容器的高度。
NB: setting the height of the body element to 100% only scales it to the height of the browser window. Any content which goeds over one page will not have the same background etc.
NB:将body元素的高度设置为100%，只将其缩放到浏览器窗口的高度。任何内容在一页之上都不会有相同的背景。
#3
2
Unfortunately, there is no fool-proof way of achieving this. A block will only expand to the height of its container if it is not floated. Floated blocks are considered outside of the document flow.
不幸的是，没有万无一失的方法可以实现这一点。一个块只有在不浮动时才会膨胀到容器的高度。浮动块被认为在文档流之外。
One way to do the following without using JavaScript is via a technique called Faux-Columns.
不使用JavaScript的一种方法是通过一种叫做“Faux-Columns”的技术。
It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.
它主要涉及到对浮动元素的父元素应用背景图像，这使您相信这两个元素的高度是相同的。
More information available at:
更多信息:
A List Apart: Articles: Faux Columns
列出的清单:文章:人造专栏。
#4
1
Another one simple method is there. You don't need to code more in CSS. Just including a java script and entering the div "id" inside the script you can get equal height of columns so that you can have the height fit to container. It works in major browsers.
还有一个简单的方法。您不需要在CSS中编写更多代码。只要包含一个java脚本并在脚本中输入div“id”，就可以得到相同的列高度，这样就可以使高度适合容器。它在主要的浏览器中工作。
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>
You can include any no of divs in this script.
您可以在这个脚本中包含任何div。
ddequalcolumns.columnswatch=["nav", "content"]
ddequalcolumns。columnswatch =(“导航”、“内容”)
modify in the above line its enough.
在上面一行修改就足够了。
Try this.
试试这个。
#5
1
I had the same issue, I resolved it using some javascript.
我也有同样的问题，我用一些javascript解决了它。
<script type="text/javascript">
var theHeight = $("#PrimaryContent").height() + 100;
$('#SecondaryContent').height(theHeight);
</script>
#6
1
If the trick using position:absolute, position:relative and top/left/bottom/right: 0px is not appropriate for your situation, you could try:
如果使用位置:绝对位置:相对位置:相对位置/上/左/下/右:0px不适合您的情况，您可以尝试:
#nav {
height: inherit;
}
This worked on one of our pages, although I am not sure exactly what other conditions were needed for it to succeed!
这是我们的一个页面，虽然我不确定它需要什么其他条件来成功!
#7
0
You probably are going to want to use the following declaration:
您可能想要使用以下声明:
height: 100%;
高度:100%;
This will set the div's height to 100% of its containers height, which will make it fill the parent div.
这将把div的高度设置为其容器高度的100%，这将使它填充父div。
#8
-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>