100％的余量的高度，同时保持宽度约束DIV在CSS

我想要一个DIV内幕另一个（我不想改变某些原因）是100％的余量的高度，同时保持宽度约束DIV在CSS

水平居中
宽度：70％但不超过800像素且不低于300像素
高度：100％，但顶部为50px，底部为20px页边距
正确显示在IE9 +，现代桌面浏览器和iOS 6+ Safari

我能得到它的工作的所有特性，但使用这个CSS高度（“子”为目标DIV）：

#child{ 
    width: 70%; 
    height: 100%; 
    max-width:800px; 
    min-width:300px; 
    margin-top:50px; 
    margin-bottom:20px; 
    margin-left: auto; 
    margin-right: auto; 
    display:block; 
}

高度利润率受到尊重，但内容被拉伸，所以滚动条出现，想要防止什么。

请参阅完整示例at this Fiddle。

你知道如何解决这个问题吗？

我知道有很多关于“如何达到100％高度和边距”的问题，但是我没有找到一个考虑宽度可变的问题。

来源

2014-09-02 muffel

我无法理解您的关键问题？ – 2014-09-02 08:12:47

您可以向父级添加50/20px的顶部/底部填充吗？ – 2014-09-02 08:14:21

我不明白。您能否为您的预期输出添加一张草图，与您在小提琴中看起来像什么相比？ – 2014-09-02 08:14:25

您可以使用绝对定位，以获得高度正确：

#child { 
    position: absolute; 
    top: 50px; 
    bottom: 20px; 
    left: 0; 
    right: 0; 
    width: 70%; 
    min-width: 300px; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
}

这需要增加position: relative到#parent但如果是董事会的唯一的孩子那么你可以避免它。这需要照顾的，我不想因为某些原因你的问题的一部分改变。

Demo Here

来源

2014-09-02 08:19:18

这是因为边距被添加到元素的高度。

我更新了小提琴，通过向父项添加填充并为小孩删除边距。

我也用箱集束性，使计算父的高度时，它以填充到：

#parent{ 
    width: 100%; 
    height: 100%; 
    padding-top: 50px; 
    padding-bottom: 20px; 
    box-sizing: border-box; 
}

http://jsfiddle.net/u6we2axp/2/

来源

2014-09-02 08:17:33 Manuszep

100％的余量的高度，同时保持宽度约束DIV在CSS

回答

相关问题