自动调整一个div在另一个

我有一个标题和容器div内的内容div。我希望头部的高度被固定，内容div占据容器div的其余部分。简单的解决方案是将内容div的高度设置为（容器标题）像素。有没有一种替代方法呢？自动调整一个div在另一个

div.container { height: 300px; width: 100%;} 
div.container h2 { height: 15px } 
div.container div.content { height: ?? }

来源

2010-09-21 Amrit

为什么你想这样做另一种方式？ – 2010-09-21 12:48:05

使用像LESS/Sass这样的预处理器会使样式表从长远来看更易于维护。这个想法是，程序员不想跟踪精确的像素数量，而是希望样式表本身记住。 – Dragontamer5788 2010-09-21 12:58:25

我不相信你可以用简单的CSS做到这一点。但是，使用像LESS或Sass这样的CSS预处理器时，实现起来并不重要。 LESS和Sass都对变量的支持，所以你可以做这样的事情：

@total-height: 300px; 
@h2-height: 15px; 

div.container { height: @total-height; width: 100%;} 
div.container h2 { height: @h2-height} 
div.container div.content { height: @total-height - @h2 }

注：我没有编译/测试此代码。但你明白了。

来源

2010-09-21 12:55:20 Dragontamer5788

使用预处理器似乎是个好主意。你知道任何可以与IIS上托管的.net项目一起使用吗？ – Amrit 2010-09-21 14:42:11

首先，您不需要将div.container的宽度设置为100％。你可以免费获得。其次，如果容器的高度是固定的，那么从容器（300px）中减去标题（15px）就是简单的算术运算。简单很好。

如果你的容器的高度不固定的，你可以试试绝对或相对定位的内容div的底部钉到父的底部（例如，bottom: 0px）。但你在这里显然不需要这个。

来源

2010-09-21 12:51:25 Robusto

自动调整一个div在另一个

回答

相关问题