Question

让我们说

.container{
   padding:25px;
   height:100%;
}

所以这里.container的高度为100％+ 25px。

问题在于，例如：

.container{
       padding:25px;
       height:100%;
       float:left;
    }
 .noPadding{ padding:0px;}


<body>
    <div class="container">blah</div>
    <div class="container noPadding">bleh</div>
</body>

它们都有100％的高度但是一个会更大。

那么我怎样才能让它们大小相同并保持填充？我不知道100％-25 * 2px多少......这取决于屏幕分辨率。

Answer 1

您可以使用css box-sizing属性：

.container{
       padding:25px;
       height:100%;
       float:left;
       -moz-box-sizing:border-box;
       -webkit-box-sizing:border-box;
       box-sizing:border-box;
    }

查看此文章了解更多http://www.quirksmode.org/css/box.html

Answer 2

好吧，您可以使用漂亮的JS库 jQuery 来实现这一点！看：

DEMO

$('.noPadding').height( $('.container:eq(0)').outerHeight(true) );

要计算第一个.conteiner高度（使用填充），您可以使用：.outerHeight(true) 而不只是将它传递给你的.noPadding元素的.height()！

<小时/> 更多信息：

jQuery API .outerHeight()
jQuery API .height()

Answer 3

在CSS中将高度设置为100％实际上并没有做任何事情。您会注意到删除它可能不会改变相关元素的大小。现在，当大小可以是动态时，创建两个相同高度的元素的唯一方法是通过javascript。你需要得到第一个的高度，然后将它应用到第二个元素。

一个例子是

var height = document.getElementById('element1').height;
document.getElementById('element2').height = height;

处理固定填充和灵活宽度/高度的最佳方法

3 个答案: