1

最大高さが 800px の外部 div があります。

その中に 1 つまたは 2 つの div を含めることができ (mysql クエリの結果によって異なります)、そのうちの 2 つ目は常に親の下部に固定する必要があります。絶対配置でこれを行うことができますが、最初の子のサイズを変更して、2 番目の絶対配置 div を考慮に入れるにはどうすればよいですか?

div が 1 つだけ作成されている場合は、その親の高さ全体を占めるようにします。

これを行う方法に関するアイデア。

助けてください！

4

3 に答える 3

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クラスを割り当てるだけです。また、2 つの div がある場合、最初の div が必要なスペースを占有し、2 番目の 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 に答える