html - 调整子 Div 的大小以适应父 div 的高度范围

Question

我认为我遇到的问题是使用 SVG 元素，如果未设置高度和宽度，这些元素会自动调整其容器的大小，这是所需的行为。我需要一种方法来自动调整子 div 的大小，使其永远不会超过父容器的高度。我试过 position:absolute;顶部:0； bottom:0; 希望它能工作，但没有。这是我的代码示例:

html:

<div id='container'>
    <div id="logo">
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400.168 177.975" enable-background="new 0 0 400.168 177.975"
        xml:space="preserve">
            <path d="M150 0 L75 200 L225 200 Z" />
    </svg>

CSS:

#container {
    width: 100%;
    padding-bottom:40%;
    background-color:red;
    position:relative;
}
#logo {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    position:absolute;
}

我的容器 Logo 也有一个 svg，这就是为什么它会调整大小但始终保持页面宽度(保持宽高比的限制因素)。有没有办法让我的子 div id='logo' 限制在 div id='container' 的边界(高度和宽度)内？

Relevant fiddle .

编辑:解决方案是首先以您满意的速率设置宽度(父 div 的百分比)并将高度设置为自动。确实，除非指定，否则不计算高度。

Answer 1

只需添加 height: 100%;到div

#container {
    width: 100%;
    padding-bottom:40%;
    background-color:red;
    position:relative;
}
#logo {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    position:absolute;
    height: 100%;
}

在这里 fiddle : http://jsfiddle.net/mLrjr1sg/