0

ヘッダーとフッターの中間にコンテンツがあるレイアウトを作成しようとしましたが、ページに多くのコンテンツを配置すると、コンテンツがフッターにオーバーフローし、改ページが -webkit-flex- を使用してみましたflow: 行のラップまたは nowrap で、行に変換するとまったく機能しません。したがって、基本的には、コンテンツ本文がフッターに展開された粘着性のあるフッターを持つページが必要ですが、コンテンツがページよりも大きい場合、ページは壊れてはなりません。クロムについて説明した方法で、フレックスボックスモデルのページを作成してください。ありがとうございます。

これが私のコードです:CSS:

html, body
{
    margin:0px; 
    height:100%; 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    -webkit-flex:1; 
    -webkit-box-flex:1;
}
#wrapper
{
    display:-webkit-box; 
    display:flexbox; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
    -webkit-flex-flow:column nowrap; 
    background-color:#f00; 
    height:100% 
}
#body
{
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    background-color:#ff6a00; 
    flex:1; 
    -webkit-box-flex:1;
}
header
{
    background-color:#4cff00; 
    height:200px
}
footer
{
    background-color:#4cff00; 
    height:200px;
}

HTML:

    <div id="wrapper">
    <header>Header</header>
    <div id="body">
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
    </div>
    <footer>Footer</footer>
</div>
4

1 に答える 1

0

これがあなたの望むものであることを願っています

html, body
{
    margin:0px; 
    height:100%; 
}
#wrapper
{
    display:-webkit-box; 
    display:flexbox; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
    -webkit-flex-flow:column nowrap; 
    background-color:#f00; 
    height:100% ; 

}
#body
{
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    background-color:#ff6a00; 
    flex:1; 
    -webkit-box-flex:1; 
    overflow: hidden;
}
header
{
    background-color:#4cff00; 
    height:200px
}
footer
{
    background-color:#4cff00; 
    height:200px;
}

フィドル

于 2013-09-11T08:25:34.383 に答える