html - 将屏幕分成 1 顶行和 2 列。两列应该是浏览器的 100% 高度

Question

这是我的问题的 fiddle 链接:http://jsfiddle.net/YZrae/2/

请注意如何在左侧出现一个额外的滚动条。我需要删除这个额外的滚动条，但无法弄清楚我做错了什么......

我需要左右两列来保留它们的滚动条，但删除出现的其余部分。

这是我在 fiddle 中使用的代码:

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; }

有什么建议吗？谢谢!

Answer 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>