2

ヘッダー、左側のオプション列、およびコンテンツ列の 3 つの主要な div を含む絶対配置レイアウトがあります。設計された動作は、ヘッダーと左側のオプション列が常にページにとどまる一方で、コンテンツ列は自由に上下にスクロールできるようにすることです (左側にコントロール パネル、上部にタイトル バーを描いてください)。

問題は、コンテンツ div 内のウィンドウのサイズ変更と左右 (x 軸) のオーバーフローです。私の望ましい動作は、約 1000 ピクセルの最小幅を持つことです。その時点で、水平スクロールバーがコンテンツ列内に表示され、ユーザーがスクロールできるようになります。これにより、ウィンドウのサイズが非常に小さくなり、レイアウトが意図したとおりに見えなくなるのを防ぎます。

既存の CSS 内で min-width ディレクティブを使用しようとしましたが、役に立ちませんでした。min-width は、私が探している「カットオフ」を達成しますが、水平スクロールバーが表示されず、水平にスクロールできません。

既存のパラダイムを使用してこれを行う方法はありますか、それともスタイル シートを別の方法で行う必要がありますか? 以下は私の既存の実装です（コンテンツ列についてテストしている min-width 属性を使用）：

html {
    overflow: hidden; 
}

body {
    margin: 0px;
    padding: 0px;
    background: #E5E5E5;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border: 0px none;
}

#header {
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 0px;
    display: block;
    color: #FFFFFF;
    background: #146647;
    font-size: 1.5em;
    padding: 5px;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

#option_column {
    position: absolute;
    left: 0px;
    top: 40px;
    bottom: 0;
    background: #0F4C35;
    color: #FFFFFF;
    width: 155px;
    padding: 3px;
    z-index: 2;
    overflow: auto;
}

#content_column {
    position: absolute;
    overflow: auto;
    min-width: 1000px;
    z-index: 1;
    top: 40px;
    left: 161px;
    right: 0px;
    bottom: 0px;
    padding: 3px;
    background: #E5E5E5;
    color: #000000;
    font-size: 14px;
}

そして、これは私のHTML構造です:

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

    <div id="option_column">
        Option Column
    </div>

    <div id="content_column">
        <div class="header_text">Content Header</div>
        <div id="subheader">
            Content (content_column intended to stop resizing at 1000px)
        </div>
    </div>

</body>
4

2 に答える 2

1

コンテンツセクションセット

width:1000px;

overflow-y: auto;

ただし、この方法では、幅は常に1000pxのままになります。言い換えれば、次のように

#content_column {
position: absolute;
width: 1000px;
overflow-y: auto;
overflow-x:scroll; /* override overflow:hidden; applied to body & html */
z-index: 1;
top: 40px;
left: 161px;
right: 0px;
bottom: 0px;
padding: 3px;
background: #E5E5E5;
color: #000000;
font-size: 14px;
}
于 2013-02-24T21:33:52.577 に答える
0

何をしますか

#content_column {overflow-x: scroll}

行う？IE <9は軸固有のオーバーフローを行わないため、を使用する必要があることに注意してください{overflow: scroll}。

于 2013-02-24T21:27:02.573 に答える