-1

我有一个固定大小的外部元素，其下方有一个页脚。元素内部有两个部分；第一个应该是固定的高度，第二个应该扩展以填充另一个元素但不会溢出它。

让我演示给你看。

我该怎么做呢？设置height: 100%第二个元素会导致它溢出外部元素并超出页脚。我看到的唯一另一种选择是以像素为单位明确设置高度，这看起来会很混乱。

这样做的正确方法是什么？

编辑：设置overflow-y: hidden将在这个非常有限的示例中起作用，但它实际上并没有限制section.inner2，并且如果我想给出section.inner2一个边框半径

4

2 回答 2

2

我能想到的最简单的解决方案（我想得不多）就是使用position: absolute;：http: //jsfiddle.net/WLZmT/3/。

HTML：

<div id="outer">
    <div id="fixed">
        Fixed.
    </div>
    <div id="fluid">
        Fluid.
    </div>
</div>

CSS：

#outer {
    position: relative;
    background: rgb(255, 200, 200);
    padding: 10px;

    height: 400px;
}

#fixed {
    height: 100px;
    padding: 10px;

    background: rgb(200, 255, 200);
}

#fluid {
    padding: 10px;
    background: rgb(200, 200, 255);

    position: absolute;
    top: 100px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
于 2012-05-18T03:34:32.807 回答
0

像这样？

<!DOCTYPE HTML>
<html>
<head>

    <title></title>


    <style media="screen" type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #container {
        left:50%;
        min-height:100%;
        position:relative;
    }
    #header {
        background:#ff0;
        padding:10px;
    }
    #body {
        padding:10px;
        padding-bottom:60px; /* Height footer */
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:60px;            /* Height of the footer */
        background:#6cf;
    }


    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #container {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body>

<div id="container">
    <div id="header">
        head
        <!-- Header end -->
    </div>
    <div id="body">
        <!-- Body start -->

        <!-- Body end -->
    </div>
    <div id="footer">
        <!-- Footer start -->
footer
        <!-- Footer end -->
    </div>
</div>


</body>
</html>
于 2012-05-18T00:46:36.673 回答