3

私が何を意味するかを示すために、以下のレイアウトを単純化しました。両方の列を 100% にする必要がありますが、問題は、1 つの列に 100% の高さよりも下に伸びてスクロールバーが表示されるコンテンツがある場合、もう一方の列はウィンドウの 100% の高さのままになることです。両方の div が常にドキュメントの高さ全体を占めるようにする方法はありますか? 以下の html を操作すると、下にスクロールしても、左の列の高さがウィンドウの元の高さのままであることがわかります。javascriptなしでこれに対する解決策はありますか? ありがとう！

<!DOCTYPE html>
<html>  
<head>
<style>
    html,body {
        min-height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .column {
        min-height: 100%;
        background: red;
        position: absolute;
        width: 200px;
    }

    #left {

        left: 100px;
    }

    #right {
        left: 400px;
    }

    #content {
        /* This height will be unknown. 2000px is just for example to push right column down*/
                height: 2000px;
    }

</style>
</head>
<body>
<div id="left" class="column"></div>
<div id="right" class="column">
    <div id="content"></div>
</div>
</body>
</html>
4

3 に答える 3

0

コンテンツが高さを押し上げているだけの場合は、 max-height: 100% として設定するか、overflow: hidden を指定して発生を停止することで解決できます。

于 2012-11-14T09:31:33.367 に答える
0 
<!DOCTYPE html>
<html>  
<head>
<style>
body, html {
  height: 100%; /* make it fill up the screen, when content longer than 100%, will cause overflow as expected */
}

.wrapper {
  min-height: 100%; /* we don't want overflow in this layer. so make it flexible */
  position: relative;
}

.column {
  border: 4px red dashed; /* to see the moving of the block when scroll. */
  width: 200px;
}

#left {
  /* this need to be always the same height of .wrapper, which is at least 100% in height. */
  position: absolute;
  top: 0;       
  bottom: 0;
  left: 100px;
}

#content {
  /* this can have any height you want it will change the height of .wrapper when it grows. but you can't use percent unit! */
  margin-left: 400px;
  min-height: 600px;
}

</style>
</head>
<body>
<div class="wrapper">
  <div id="left" class="column"></div>
  <div id="content" class="column"></div>
</div>
</body>
</html>

これは、最新のすべてのブラウザーで動作するはずです (IE7 は、最小高さをサポートしていないため、このバージョンでは動作しない可能性があります。IE9 の IE7 モードでは正常に動作します。以前のものを確認してください)。このソリューションは、左の列が常に の高さを維持するようにします。これにより、.wrapper内部のコンテンツの高さに自動的に適合し、 の高さに関係なく、少なくとも 100% の高さを維持し#contentます。

デモを見る。

背景や右側の境界線を表示するなどの視覚効果が必要な場合は、コンテンツを少なくとも高さ 100% まで引き伸ばしたように見せます。のように別の飾り箱#leftを使って、後ろに寝かせることもできます#content。これは視覚的にニーズを満たし、スクリプト XD を記述する必要はありません。楽しい

このデモを表示します。

于 2012-11-14T09:32:10.480 に答える
0

このCssで試してください-

.column {
        height: 100%;
        background: red;
        position: absolute;
        width: 200px;
    }

#left {

    left: 100px;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

#right {
    left: 400px;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

ワーキングフィドル - http://jsfiddle.net/vR4eU/

そして、これが機能する理由：

padding-bottom: 1000px を追加して、両方の div を非常に長く見せてから、margin-bottom: -1000px を使用して、そうではないことをブラウザに伝えます。ソリューションをよりよく説明するこのブログを参照してください。

更新:おそらくFaux columns、クロスブラウザーと互換性のあるより良い方法で、あなたを助けることができます. これを参照してください- http://www.alistapart.com/articles/fauxcolumns/

于 2012-11-14T09:28:44.667 に答える