gpt4 book ai didi

jquery - 布局适用于 jsfiddle,不适用于浏览器

转载 作者:太空宇宙 更新时间:2023-11-04 14:52:19 25 4
gpt4 key购买 nike

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。为什么是这样?

最佳答案

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

关于jquery - 布局适用于 jsfiddle,不适用于浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17288223/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com