1

私はウェブサイトを作っており、メインコンテンツの周りに「境界線」があります。CSSの境界線ではなく、背景画像のあるdivであるため、「境界線」と言います。

これで、左右のdiv境界線（＃cont-border-left / right）の高さが明示的に675pxに設定され、そのすぐ下に別のdiv（＃extend-l / r）があり、ページを下に展開したいときにメインコンテンツは675pxを超えています。

可能であればCSSのみを使用してこれを実行したいのですが、そうでない場合はJavaScript/JQueryも私にとって優れたソリューションになります。

ここにたくさんのコードを貼り付けるつもりでしたが、すべてを一緒に見ることができればもっと理にかなっていると思うので、ソースを表示する方がおそらく簡単でしょう。

同様の質問でこれを見ました...しかし、私はjQueryやJavaScriptが得意ではありません。

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});

そしてそれを次のようなものに変えます：

$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height = $('#content' - 645px)

^上記の行にはヘルプ/修正が必要です

}
else
{
$('#extend-l').height = 0
}
});

私が何を試してみるべきかについてのアイデアはありますか？

EDIT2：それでも誰かが純粋なCSSソリューションを持っているかどうか知りたいです！

4

2 に答える 2

1

CSS3border-imagesに興味があるかもしれません。さまざまなものを参照してください。

于 2012-07-25T17:04:59.413 に答える
0

理解した。私は自分が行った編集に近づきました。

誰かが将来同様のものを必要とする場合の作業コードはここにあります。

$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
    {
    $('#extend-l').height($('#content').height()-675)
    }

if($('#content').height() > $('#cont-border-right').height())
    {
    $('#extend-r').height($('#content').height()-675)
    }
});
于 2012-07-25T16:56:33.803 に答える