6

かなり長い間、私は明らかに間違った方法でアプローチしている特定のレイアウトの問題をいじっています。

基本的なコンポーネントに分解されたアプローチは次のとおりです。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
    <div class="header">SOME HEADER</div>
    <div class="someControls">
        <input type="button" value="click me"/>
        <input type="button" value="no me"/>
    </div>
    <div class="inner">
        some text...
    </div>
</div>
</body>
</html>

次のCSSを使用：

.stretched {
    position:absolute;
    height:auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

.inner {
    margin:10px;
    background-color: red;   
    overflow: auto;        
}

私がやろうとしているのは、stretched利用可能なすべての垂直方向のビューポート スペース (ヘッダーとフッターの上下数ピクセルを差し引いたもの) を利用して div を作成し、水平方向に固定して中央に配置することです。

これはかなりうまくいくようです。問題は、プロパティがコンテンツにoverflow: auto;適用されていないことです。長くなると、innerdivがコンテナーと重なり、スクロールバーが表示されなくなります。some text...inner

これがフィドルです：フィドル＃1

ページ本体にスクロールバーを配置することを避け、代わりにinnerdiv内のスクロールバーによってオーバーフローを管理して、stretched常に完全に見えるようにしたい.

同じトリックを div にも適用できますがposition: absolute; top: 0; ...、inner+ の高さをheader明示的に指定する必要がsomeControlsあります。これは、すべてのページで異なるため、回避したいと考えています。

これは、私が望むように機能する方法です（一部を除くtop: 40px;）：フィドル＃2

ここで何が間違っていますか？前もって感謝します！

4

3 に答える 3

1

これは純粋なCSSでは不可能だと思います（すべての一般的なブラウザーで機能します）。

古いFlexbox仕様を使用したアプローチは次のとおりです：http： //jsfiddle.net/thirtydot/xRr7e/

残念ながら、WebKitブラウザ/Firefoxでのみ機能します。

このレイアウトに数行のJavaScriptを使用するときが来ました。

于 2012-04-24T12:01:09.963 に答える
0

スタイルシートで絶対位置を定義するのはなぜですか

これを交換

    .stretched {

    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

ライブデモ http://jsfiddle.net/rohitazad/Rpdr9/366/

更新された js フィドルhttp://jsfiddle.net/rohitazad/Rpdr9/368/

于 2012-04-24T08:55:12.060 に答える
0

削除する

position: absolute;

そして追加

border: 10px solid green;

http://jsfiddle.net/Rpdr9/367/

編集: 巨大な境界線が気に入らない場合は、境界線のサイズを 1px に変更できます。

border: 1px solid green;

これでも機能します。

于 2012-04-24T08:58:57.640 に答える