我有一个使用Openx显示广告的php文件。我有一份清单。在底部我需要显示添加。但它在后面。有人可以建议我如何添加到前面或设置列表的高度为80％但不是像素。 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Byrd- Instructional Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript">
$(document).bind("mobileinit", function () { $.mobile.defaultPageTransition = "none"; });
</script>
<link rel="shortcut icon" href="iconapple.png" type="image/x-icon">
<script src="lib/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" charset="utf-8" src="js/script.js"></script>
<link rel="apple-touch-icon" href="webapp.png" />
<link rel="apple-touch-icon" sizes="72x72" href="webapp72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="webapp114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="webapp114.png" />
<link rel="stylesheet" href="css/add2home.css">
<script type="application/javascript" src="js/add2home.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div data-role="page" id="mainView" height="100%">
<div data-role="header" id="mainheader">
<a href="javascript: window.history.go(-1)" data-role="button" data-inline="true"
data-icon="back" id="backBtn">Back</a>
<h1 id="linkHeader" style="overflow: visible;">
Supersites for Elementary</h1>
</div>
<!-- /header -->
<div data-role="content" height="100%">
<ul data-role="listview" data-inset="true" style='overflow: auto; height: 80%;'>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17944&name=Art"
class="menu">Art</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17945&name=Bilingual"
class="menu">Bilingual</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17946&linkid=nav-menu-original-4-1&name=Computer Smarts!"
class="menu">Computer Smarts!</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17947&name=Geography"
class="menu">Geography</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17948&name=Organizers & Thinking Maps"
class="menu">Organizers & Thinking Maps</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17949&name=Health"
class="menu">Health</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17950&name=Holidays"
class="menu">Holidays</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17951&name=Keyboarding"
class="menu">Keyboarding</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17952&name=Math"
class="menu">Math</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17953&name=Music"
class="menu">Music</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17954&name=PE"
class="menu">PE</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=18575&linkid=nav-menu-original-4-1743&name=Prek and Kinder"
class="menu">Prek and Kinder</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17956&name=Reading/LA"
class="menu">Reading/LA</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=18489&linkid=nav-menu-original-4-1743&name=Science"
class="menu">Science</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17927&linkid=nav-menu-original-4-1743&name=Social Studies"
class="menu">Social Studies</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17960&name=SMARTboard"
class="menu">SMARTboard</a></li>
<li class="link3"><a href="frame_url.php?url=www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17961&name=TAKS"
class="menu">TAKS</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=17962&name=Thinking Games"
class="menu">Thinking Games</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?cms_mode=view§iondetailid=18532&linkid=nav-menu-original-4-1743&name=Cool Websites"
class="menu">Cool Websites</a></li>
<li class="link3"><a href="frame_url.php?url=http://www.azleisd.net/education/components/scrapbook/default.php?sectiondetailid=18808&#gotonew&name=Counseling Corner"
class="menu">Counseling Corner</a></li>
</ul>
</div>
<!-- /footer -->
</div>
<div align="center" id="placeholder">
<script type='text/javascript'><!-- //<![CDATA[
var m3_u = (location.protocol == 'https:' ? 'https://ad.educatorsapp.com/www/delivery/ajs.php' : 'http://ad.educatorsapp.com/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random() * 99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write("<scr" + "ipt type='text/javascript' src='" + m3_u);
document.write("?zoneid=1");
document.write('&cb=' + m3_r);
if (document.MAX_used != ',') document.write("&exclude=" + document.MAX_used);
document.write(document.charset ? '&charset=' + document.charset : (document.characterSet ? '&charset=' + document.characterSet : ''));
document.write("&loc=" + escape(window.location));
if (document.referrer) document.write("&referer=" + escape(document.referrer));
if (document.context) document.write("&context=" + escape(document.context));
if (document.mmm_fo) document.write("&mmm_fo=1");
document.write("'><\/scr" + "ipt>");
//]]>--></script>
<noscript>
<a href='http://ad.educatorsapp.com/www/delivery/ck.php? n=a60641fc&cb=INSERT_RANDOM_NUMBER_HERE'
target='_blank'>
<img src='http://ad.educatorsapp.com/www/delivery/avw.php? zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE&n=a60641fc'
border='0' alt='' /></a></noscript>
</div>
</body>
</html>
广告将在此处显示。它需要到达前面或我需要减少列表div标签的高度。这是一个响应式网站。
答案 0 :(得分：1)
百分比高度仅在设置父元素的高度时有效。您既可以设置父级的高度，也可以使用类似jQuery的.height（）来查找父级的高度，并计算/添加ul的高度。对于高度文档，您可以在http://api.jquery.com/height/
找到它答案 1 :(得分：0)
如果您想将广告放在前面，可能需要添加到#placeholder
z-index: 20;
z-index将允许您控制在dept方面放置容器或元素所需的级别。数字越小，它出现的越深。数字越高，它出现的越多。