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% 分配给顶行并将 95% 分配给下面的两列来尝试删除额外的滚动。否则溢出-y：隐藏；但如果您打算插入，那会隐藏溢出的内容。

于 2013-03-17T16:43:57.700 回答