Question

我认为我遇到的问题是使用SVG元素，如果没有设置高度和宽度，它会自动调整大小，这是理想的行为。我需要一种方法来自动调整子div的大小，使其永远不会超过父容器的高度。我试过position:absolute; top: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;
}

我的容器徽标也有一个svg，这就是为什么它调整大小但始终保持页面的宽度（保持纵横比的限制因素）。有没有办法让我的孩子div id='logo'克制到div id='container'的边界（高度和宽度）？

Relevant fiddle

编辑：解决方法是首先以您满意的速度（父div的百分比）设置宽度，并将高度设置为auto。除非另有说明，否则不计算高度。

Answer 1

添加高度：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%;
}

小提琴： http://jsfiddle.net/mLrjr1sg/

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

1 个答案: