2

我正在尝试建立一个网站，使其看起来像一个应用程序模板：

在阅读了几个教程之后，这是我到目前为止所得到的：

在此处输入图像描述

它可能看起来有点复杂，但我在下面解释：

我的模板包含很多 div，其中一些可能是额外的，无论如何，通过给所有 div 一个绝对位置并在必要时添加溢出-x 和溢出-y，我最终得到的模板如上所示，黑色条表示我有我想要的 div 滚动。

一些注意事项：Tasks 表是一个 div，其中包含一个大表，这就是我添加垂直和水平滚动的原因。

右面板 div：有很多其他 div 和 h3 标签，没有特定样式，只有 4 到 5 个 div，右面板宽度相同，高度不同，这就是我希望右面板垂直滚动的原因。

现在我的问题是我未能使右侧面板水平滚动，尤其是当我调整浏览器寡妇的大小时。实际上，当我减小浏览器窗口宽度时，它看起来是这样的......

在此处输入图像描述

即使当我进一步减小宽度时，右侧面板也会一直滑动，同时覆盖中间面板和左侧面板。 在此处输入图像描述

这应该发生吗？调整浏览器大小时，为什么右侧面板不像中央面板那样水平滚动？那是因为右面板内的div吗？

4

1 回答 1

0

最快的方法是通过 javascript 或更好的 jquery 计算任务控件和任务表的宽度和高度。

jQuery的例子

$(function() {
res();
$(window).resize(function() {
res();
});

function res(){
var windowWidth = $(window).width(); 
var leftPanelWidth = $('left-panel').width();  
var RightPanelWidth = $('left-panel').width();  
$('#task-controls','#task-table').width(windowWidth-leftPanelWidth-RightPanelWidth); 
}
});

编辑：这里是完整、更正和评论的版本

<!-- load jquery from the internet, if u dont want to download it -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//run when dom (website) was load completly. same as "$(document).ready()"
$(function() {
    //call own function on first time
    res();

    //evertime when window will be reiszed by user
    $(window).resize(function() {
        //call function again
        res();
    });

    function res(){
        //get sizes
        var windowWidth = $(window).width(); 
        //the '#left-panel' searches for an html element with the id left-panel
        var leftPanelWidth = $('#left-panel').width();  
        var RightPanelWidth = $('#left-panel').width();  
        //set width for emements with ids #task-controls and #task-table. size is window width minus both menus
        $('#task-controls','#task-table').width(windowWidth-leftPanelWidth-RightPanelWidth); 
    }
});
</script>

如果你想建立一个类似网站的应用程序，你应该学习 jquery http://api.jquery.com/ http://www.w3schools.com/jquery/jquery_ref_selectors.asp

还是我误解了你的问题？你想防止中心面板的裁剪

于 2013-05-15T12:11:30.470 回答