2

幅が 1225px のコンテンツ領域がある場合、ページをその幅未満に縮小したときに水平スクロール バーが表示され、中央のコンテンツが常に表示されるようにするにはどうすればよいですか (少なくともスクロールのオプションがあります)。 )? 固定または絶対配置を使用する必要がありますか?

このサイトでは、ページを縮小すると水平スクロール バーが表示されます: http://www.websitecodetutorials.com/

それが役立つかどうかはわかりませんが、ここに私のコードの一部があります：

<body class="fullbackground">
    <img class="fullbackground" src="background.png" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src="pathfinder_logo.png"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">Pathfinder is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
        <div class="contentcontainer">

CSSリセットを使用しました。これが私のCSSの一部です：

.bar {
    background-color:#365C8C;
    height:30px;
    width:auto;
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden; 
}

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden;
    height:100%;
    width:100%;
    background-color:#ADCCEB;
    /*background-color:black;*/
    /*background: url(background.png);*
    /*background-size:100%;*/
}

.bold {
    font-weight:bold;
}

.contentcontainer {
    width:825px;
    height:870px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

.extcontentcontainer {
    width:825px;
    height:645px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

img.fullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

img.extfullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:100%; 
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
4

2 に答える 2

2

これを試して：

<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; overflow-x: scroll;">

overflowプロパティは、スクロールバーを提供する必要があります。

于 2013-06-14T15:16:55.840 に答える
2

このプロパティを body タグに追加してみてください:

オーバーフロー-x:自動;

于 2013-06-14T15:22:08.250 に答える