2

だから私はいくつかの基本的なものでレイアウトを構築しようとしています:固定サイズのヘッダー。コンテンツは、ページと同じ大きさにすることが許可されています。オーバーフローは、その中をスクロールするだけです。

内部の div をスクロールしてオーバーフローを維持することはできないようです。

CSS:

body {
    display:table;
    width: 100%;
}         
#content-body,#header {
    display:table-row;
}

 #content {
    text-align: center;
    height: 100%;
    width: 50%;
    overflow-y: scroll;
    background-color: red;
}

HTML:

<body>
    <div id="header">
        header here
    </div>

    <div id="content-body">
            <div id="content">
             <--   Need this to scroll -->
            </div>

        </div>
    </div>
</body>

JSFiddle _

私はcssとhtmlだけでこの仕事をしたいだけです

誰か私を助けてください！なぜこれが機能しないのか、私はちょっと混乱しています

4

2 に答える 2

0

次のようなことを試してください：

サンドボックス.css:

#header {
    width: 100%;
    height: 40px;
    background-color: #ff4200;
}
#content-body {
    width: 100%;
}
#content {
    width: 100%;
    height: 40px;
    overflow-y: scroll;
    background-color: #0042ff;
}

サンドボックス.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sandbox.css">
    </head>
    <body>
        <div id="header">
            header here
        </div>
        <div id="content-body">
            <div id="content">
                <-- Need this to scroll -->
            </div>
        </div>
    </body>
</html>
于 2013-10-02T22:03:52.957 に答える