0

内容を反映して中央のdivの高さが変化するボックスを作成したいと思います。中央のコンテンツにはが含まれ<li>、ページごとに高さが異なる場合があります。簡単な図：

[-- 1. fixed --]
[-- 2. flex  --]
|--    flex  --|
|--    flex  --|
[--    flex  --]
[-- 3. fixed --]

問題は、3番目のセクションが常に完全な高さであり、コンテンツがその上を流れるようにし、中央のセクションを使用して余分な部分を埋める必要があることです。これは私が現在持っているマークアップです（1.固定が上、2。中央、3。下）：

<div class="box">
    <div class="top">
        <h4>Title</h4>
    </div>
    <div class="middle">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>
    <div class="bottom"></div>
</div>

とcss

.top {
    background: url('/img/box_top.png') no-repeat;
    height: 10px;
}

.middle {
    background: #000;
}

.bottom {
    background: url('/img/box_fot.png') no-repeat;
    height: 150px;
}

コンテンツに応じて中央のdivの高さを調整するための最良の方法は何ですか？

4

1 に答える 1

0

BillyMoatが私の最初の質問の欠陥を指摘した後、私はそれを解決しました。

高さに合わせて底に負のマージンを追加しました<div>。

.bottom {
    background: url('/img/box_footer.png') no-repeat;
    margin: -150px 0 0px 0;
    height: 150px;
}
于 2012-09-03T10:59:56.933 に答える