html - 如何实现类应用模板？

Question

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

在阅读了一些教程后，我目前得到的是:

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

我的模板包含很多 div，其中一些可能是额外的，无论如何，通过给所有 div 一个绝对位置并在必要时添加 overflow-x 和 overflow-y 我最终得到的模板看起来像上面的黑条指示的那样我可以根据需要滚动 div。

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

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

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

即使我进一步减小宽度，它就像右侧面板一直滑动到覆盖中心和左侧面板一样。

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

Answer 1

最快的方法是通过 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

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