1

我有一个最大高度为 800px 的外部 div。

其中我可以有一个或两个 div（取决于 mysql 查询的结果），其中第二个应该始终固定在其父级的底部。我可以用绝对定位来做到这一点，但我如何调整第一个孩子的大小以考虑第二个绝对定位的 div？

如果只创建一个 div，那么我希望它占据其父级的全部高度。

关于如何做到这一点的任何想法。

请帮忙！

4

3 回答 3

0

在站点外创建一个 div（左：-9999px），最大高度为 800px，向其中添加元素，测量内部 div 的高度，然后将结果应用于实际显示的 div。完成后不要忘记从站点 div 中删除

于 2013-09-26T15:40:52.413 回答
0

我建议使用 jQuery 或其他一些易于使用的 javascript DOM 操作库。设置适当的高度非常容易：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container {
            height: 400px;
            background-color: #99CCFF;
            position: relative;
            top: 0;
            left: 0;
        }
        .first {
            background-color: #FFCCFF;
            width: 100%;
        }
        .second {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #CCFFCC;
        }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var height = $('.container').height() - $('.second').outerHeight();
            $('.first')
                .height(height);
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="first">
            <h1>This is first div.</h1>
        </div>
        <div class="second">
            <h1>This is second div.</h1>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
            </ul>
        </div>
    </div>
</body>
</html>

于 2013-09-26T16:10:26.733 回答
0

使用纯 CSS

工作小提琴

在这个解决方案中，如果第一个 div 是“单独的”，他将占据整个容器空间（只需分配Alone类。如果有两个 div，第一个 div 将占据他需要的空间，第二个 div 将始终填充剩余的差距。

HTML：（一个很简单的）

<h5>When the first is 'alone'</h5>
<div class="Container">
    <div class="First Alone">Some Content</div>
</div>

<h5>When there are two div's</h5>
<div class="Container">
    <div class="First">Some Content</div>
    <div class="Second">Some Content</div>
</div>

CSS：

.Container
{
    max-height: 800px;
    /*for demonstration only*/
    height: 100px;
}
.Container:before
{
    content: '';
    height: 100%;
    float: left;
}
.First
{
    /*for demonstration only*/
    background-color: green;  
}
.Alone
{
    height: 100%;
}

.Second
{
    /*for demonstration only*/
    background-color: red;
}
.Second:after
{
    content: '';
    clear: both;
    display: block;
}
于 2013-09-26T17:54:59.223 回答