Question

链接到jsfiddle：http://jsfiddle.net/Uy4Jz/ 我正在尝试使用jQuery UI选项卡和这里的教程（http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/）进行布局，但由于某种原因它只适用于jsfiddle（在浏览器中，侧边栏和内容都占用了页面的整个宽度）只有纯白色背景）。 jsfiddle中添加的CSS位于底部附近，这是在实际的CSS文件中：

html {
overflow: hidden;
}

#sidebar {
background: #000000;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
width: 300px;
overflow-y: auto;
color: #FFFFFF;
}

#contentWrapper {
float: left;
width: 100%;
} 

#content {
background: #0A0000;
margin-left: 300px;
overflow-y: auto;
}

这是实际的HTML文件：

    <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Me</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    //GET BROWSER WINDOW HEIGHT
    var currHeight = $(window).height();
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
    $('#sidebar, #content').css('height', currHeight);
    //ON RESIZE OF WINDOW
    $(window).resize(function() {
        //GET NEW HEIGHT
        var currHeight = $(window).height();
        //RESIZE BOTH ELEMENTS
        $('#sidebar, #content').css('height', currHeight);
    });
    $('#tabs').tabs();
});
</script>
<link href = "jquery-ui-1.10.3.custom.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<header id = "sidebar">
    This is the sidebar. Hopefully it works.
</header>
<article id = "contentWrapper">
<section id = "content">
    <div id = "tabs">
        <ul>
            <li><a href = "#tabs-1">Blog</a></li>
            <li><a href = "#tabs-2">About Me</a></li>
            <li><a href = "#tabs-3">My Projects</a></li>
        </ul>
        <div id = "tabs-1">
            <p>Y HELLO THAR</p>
        </div>
        <div id = "tabs-2">
            <p>I am a person.</p>
        </div>
        <div id = "tabs-3">
            <p>I like to do things sometimes.</p>
        </div>
    </div>
</section>
</article>
</body>
</html>

我认为问题在于CSS并没有正确应用于两个主要布局元素，但我不知道为什么。

编辑：在使用Chrome的开发者工具进行快速检查时，我的怀疑得到了证实：两个主要元素没有显示匹配的CSS。为什么是这样？

Answer 1

原来我正在编辑实际CSS文件的副本，而不是真实的。不过感谢大家的帮助。

布局在jsfiddle中工作，而不是在浏览器中

1 个答案: