6

2 つの div を上下に配置しようとしています。一番上のものは固定サイズです。一番下のものは、コンテンツが大きすぎる場合にページを高くすることなく、残りのページの高さを埋める必要があります.

<div id="content">
    <div id="top-padding"></div>
    <div id="stuff">
        some content
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        End of content.
    </div>
</div><!-- content -->

これまでの私の試みは次のとおりです。http://jsfiddle.net/b4fEE/

私が抱えている問題は、緑の div が大きすぎることです。高さを次のように指定する方法が必要です

100% - 30px

私は純粋な css でこれを行うことを好みますが、必要に応じて javascript/jquery に頼ります。

4

3 に答える 3

9

これを試して:

#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}

働くフィドル

于 2013-03-08T12:34:50.110 に答える
1

そして、フレックスを使用せずに通常の流れで物事を解決したい場合、解決策は次のとおりです。

html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    #content {
        height: 100vh;
        position: relative;
        background-color: #C9E6FF;
        margin: 0 auto;
        width: 300px;
    }

    #top-padding {
        background: blue;
        height: 30px;
    }

    #stuff {
        overflow-x:auto;
        background-color: lightgreen;
        height: calc(100vh - 30px);
    }
<div id="content">
    <div id="top-padding"></div>
        <div id="stuff">
            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
       </div>
   </div>

于 2016-04-19T12:44:17.217 に答える