I have a web page that uses the following code:
<!DOCTYPE html>
<html style="height: 100%; margin: 0; padding: 0; color: #FFF;">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
#content { height: 100%; overflow: hidden; background: white; }
#header { float: left; width: 100%; background-color:silver; padding:8px 4px;}
.tabItem { padding:15px; border:1px solid #ccc; background-color:blue; top:0; left:0; }
</style>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.cycle.all.js"></script>
</head>
<body style="height: 100%; margin: 0; padding: 0; color: #FFF;">
<div id="content">
<div id="header">
<a href="#" onclick="showTab(0);">Tab 1</a> |
<a href="#" onclick="showTab(1);">Tab 2</a> |
</div>
<div id="tabItems">
<div id="tabItem1" class="tabItem">
<h2>Tab Content Number 1</h2>
</div>
<div id="tabItem2" class="tabItem">
<h2>Tab Content Number 2</h2>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#tabItems').cycle({
fx: 'scrollDown',
next: '#next',
prev: '#prev',
timeout: 0
});
});
function showTab(tn) {
$('#tabItems').cycle(tn);
return false;
}
</script>
</body>
</html>
Somehow, I need to make each .tabItem the width and height of the available real-estate. Unfortunately, I CANNOT set the height of the tabItems div. The reason why is because the plugin I’m using (Cycle), doesn’t seem to work when I set the height of the tabItems div. Weird. Because of that, I’m trying to figure out a way around that.
Does anyone know how I can make a .tabItem item the width/height of the available real-estate, without setting the height of the tabItems element?
Thank you
There are a couple things to consider. Are you trying to set height by %? If so, that will only work if the parent element has an explicit height.
Also…
In CSS you can set the top, right, bottom, and left properties of an element to 0px, and it will touch all the borders of it’s parent.