0

链接到 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。为什么是这样？

4

1 回答 1

1

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

于 2013-06-25T12:29:43.930 回答