1

ここに私の問題へのフィドルリンクがあります: http://jsfiddle.net/YZrae/2/

左側に余分なスクロール バーが表示されていることに注意してください。この余分なスクロール バーを削除する必要がありますが、何が間違っているのかわかりません...

スクロールバーを保持し、表示されている残りを削除するには、左右の列が必要です。

フィドルで使用したコードは次のとおりです。

HTML:

<div class="top_wrap"></div>
<div class="content_wrap">
  <div class="col_right_wrap"></div>
  <div class="col_left_wrap"></div>
  <div class="clear"></div>
</div>

CSS:

html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
.top_wrap{
background-color:red;
height:50px;
}
.content_wrap{
background-color:blue;
height:100%;
position:relative;
}
.col_right_wrap{
float:right;
height:100%;
background-color:green;
width:50%;
overflow-y: scroll;
}
.col_left_wrap{
float:left;
width:49%;
height:100%;
background-color:yellow;
overflow-y: scroll;
}
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }

助言がありますか？ありがとう！

4

2 に答える 2

1

少しの jQuery に問題がなければ、これで十分です。

ここにjsFiddleがあります。

コード jQuery コードは、.content-wrap のサイズを (ウィンドウの高さ - .top_wrap の高さ) に変更します。jQueryコードは次のとおりです。

<script>
functionHeight = function () {
    var varBrowserHeight = $(window).height();
    var varTopWrapHeight = $(".top_wrap").height();

    $(".content_wrap").css('height', (varBrowserHeight - varTopWrapHeight));
};

$(document).ready(function () {
    functionHeight();
});

$(window).resize(function (event) {
    functionHeight();
});
</script>
于 2013-03-17T23:03:20.207 に答える
0

これは、列の高さが 100% で、その上に 50px の行を追加しているため、スクロールが発生するためです。一番上の行に height:5% 、下の 2 つの列に 95% を指定して、余分なスクロールを削除してみてください。または、overflow-y:hidden; ただし、挿入を計画している場合は、オーバーフローしたコンテンツが非表示になります。

于 2013-03-17T16:43:57.700 に答える