如何使用CSS将div的高度设置为其容器高度？

-3

你不能将包含的元素的高度设置为高度：100％;

来源

2009-12-10 13:43:43 AJM

+2

不，因为容器有'height：auto'，所以'height：100％'会回退到'auto'。 – Quentin 2009-12-10 13:49:08

+0

我认为它的高度：auto是没有明确高度集合的容器的默认值吗？ – AJM 2009-12-10 14:21:42

+1

Yes是默认和stackoverflow不喜欢三个字符的评论） – Quentin 2009-12-10 15:59:02

3

如果我的理解是正确的，并且没有指定高度的div的默认高度是auto，那么在没有在包含div上设置明确的高度的情况下这是不可能的。如果在包含div上设置了明确的高度，那么包含div的高度：100％将意味着它增长到容器的高度。

来源

2009-12-10 14:33:28 AJM

2

看来你正在试图获得同等高度的专栏。您可以使用fauxcolumns方法，其中背景图像用于伪造相等的高度。那里还有其他的方法。

来源

2009-12-10 14:47:39 Tom

+0

我必须证明这是最简单的方法，并且具有最好的浏览器支持。 – invot 2014-09-30 17:23:31

1

这是一件棘手的事情 - 没有明确的最佳方法，但有一些常见的方法。如果我们假设你真正需要的是右列的高度与左列的高度相当（或者看起来相当于），那么你可以使用经常使用的任何技术来获得相等高度的列。 This piece包含一些技巧以获得正确的外观和行为。我建议阅读它，看看它是否能解决您的问题。

另一种方法是使用Javascript来确定容器的高度，并设置右边的列。该技术已在SO here上进行了讨论。只要你的容器尺寸不是决定外容器大小的唯一因素，那应该是一个有效的方法（如果情况并非如此，那么你就会有鸡蛋问题，这可能会导致怪异的行为）。

来源

2009-12-10 14:50:14

+0

http://www.alistapart.com/articles/fauxcolumns/ <=原始文章描述你链接到的虚拟列技术 - 这是最高职位真正要求的;） – 2009-12-18 22:24:29

0

示例代码，您需要从html元素开始，以便您可以使用容器中的灵活高度。

<!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>100% Test</title> 
<style type="text/css"> 

    html, body, #inner { height: 100% } 
    #inner { border: 4px blue solid } 
    #container { height: 200px; border: 4px red solid } 

</style> 
</head> 
<body> 

    <div id="container"> 
     <div id="inner"> 
      lorem ipsum 
     </div> 
    </div> 

</body> 
</html>

来源

2009-12-10 15:51:08

2

您可以告诉容器div显示为表格并将内部div显示为表格单元格。

的HTML

<body> 
<div id="wrap"> 
    <div id="header"> 
     <h1> 
      My Header</h1> 
    </div> 
    <div id="main"> 
     <ul id="nav"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     <div id="primaryContent"> 

     </div> 
    </div> 
    <div id="footer"> 
     <h1> 
      My Footer</h1> 
    </div> 
</div>

的CSS

#wrap 
{ 
    width: 800px; 
    margin: auto; 
} 

#header 
{ 
    background: red; 
} 

#main 
{ 
    display: table; 
} 

#nav 
{ 
    background: gray; 
    width: 150px; 
    display: table-cell; 
} 

#primaryContent 
{ 
    background: yellow; 
    padding: 0 .5em; 
    display: table-cell; 
}

修正了IE

#wrap 
{ 
    width: 800px; 
    margin: auto; 
} 

#header, #footer 
{ 
    background: red; 
} 

#main 
{ 
    background: url(../bg.png) repeat-y; 
} 

#nav 
{ 
    background: gray; 
    width: 150px; 
    float: left; 
} 

#primaryContent 
{ 
    background: yellow; 
    margin-left: 150px; 
    padding: 0 .5em; 
}

来源

2009-12-10 17:46:35 Chad

6

有一种方式，如果你刚好是全光照要做到这一点g jQuery。当你问CSS时，这可能不是一个可用的选项，但是如果你可以使用它，它将完成你想要的。

$(divToResize).css('height',$(container).innerHeight());

$（divToResize）是要匹配的高度，它的容器和$（容器）的DIV选择在逻辑上是要得到其高度的容器。

无论容器的高度是否在CSS中指定，这都会起作用。

来源

2009-12-18 21:30:22 KyokoHunter

0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.container{ 
    position:relative; 
    background-color:#999; 
} 
#to-be-sized{ 
    position:absolute; 
    top:0; 
    height:100%; 
    background-color:#ddd; 
} 
</style> 
<body> 

<div class='container'> 
    <br> 
    &nbsp;&nbsp; 
    <div style='display: block; height: 500px'>left</div> 
    <br> 
    &nbsp;&nbsp; 
    <div id='to-be-sized' >right</div><br> 
</div> 

</body> 
</html>

来源

2009-12-18 21:54:22 Rob

9

您可以：

用纯CSS的不完整的，但哲学上正确的路径和面临的浏览器

或

写3之间的每一个不兼容的情况肮脏的语义错误和恶魔的线条制作桌子，让它在任何地方都完美地工作

你挑:)

来源

2009-12-18 22:10:25

+0

这个答案让我微笑=）。 – 2013-05-09 01:54:48

+1

多年以来，桌子一直受到很多人的追捧，而对于这么多问题，年表一直是唯一可靠的解决方案。 CSS标准从一开始就被打破。这样一个简单的问题应该是小菜一碟，但事实并非如此。 – GetFree 2013-05-21 20:45:32

0

我做类似的东西KyokoHunter：

$('div.row').each(function(){ 
    var rowHeight = $(this).innerHeight(); 
    $(this).children('div.column').css('height',rowHeight); 
});

这种经历在一个div“表”中的每一行，使高度全部匹配，只要divs被相应地归类。

来源

2013-07-01 19:19:19 cfrydlewicz

-1

我知道这是永久回答，但是当我遇到这个问题时，我使用Flex Box。这很棒。见A Complete Guide to Flexbox克里斯Coyier

.parent { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.child { 
 
    flex-grow: 1; 
 
} 
 
.child1 { 
 
    min-height: 200px; 
 
    background-color: #fee; 
 
} 
 
.child2 { 
 
    background-color:#eef; 
 
}

<div class="parent"> 
 
    <div class="child child1">Child 1</div> 
 
    <div class="child child2">Child 2</div> 
 
</div>

的Flexbox Layout（软盒）模块旨在提供一个更有效的方式来布置，调整和项目之间在一个容器中分配空间，即使它们的大小是未知的和/或动态的（因此“flex”这个词）。

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要适应各种显示设备和屏幕尺寸）。柔性容器可扩展项目以填充可用空间，或缩小它们以防止溢出。

最重要的是，与常规布局（基于垂直和水平基于内嵌的块）相比，Flexbox布局与方向无关。虽然这些工作对于页面很有效，但它们缺乏灵活性（无双关语）来支持大型或复杂应用程序（尤其是在改变方向，调整大小，拉伸，缩小等方面）。

来源

2015-12-15 21:06:21 cfrydlewicz

+1

更好地发布实际代码并引用链接 - 这样，如果网站发生故障，代码仍然可用。 – Wex 2015-12-15 21:28:43

0

CSS文件使用'填充'功能来确定容器的高度和深度。要更改容器字段的高度，请简单插入调整指定容器的填充字段。

下面的代码片段是用于容器类的CSS的例子（你会发现这是在HTML文件中。

.container{padding-top:100px;padding-bottom:50px}header

来源

2016-11-23 05:42:28 TheOgBroski

如何使用CSS将div的高度设置为其容器高度？

回答

相关问题