This question already has answers here:
set content height 100% jquery mobile
(8 answers)
Closed 8 years ago.
I have a mobile webpage created using jquery mobile which contains a header and 4 divs. The header is to occupy 10% of the page with the following 90% filled equally with the divs. I have the following code but I can't seem to get it to fill the page. I've done some research and I believe this may be to do with the content being less than the height of the page so I've tried setting the page height to the viewport height using jquery to no avail. Any ideas what I may be doing wrong?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
#header
{
height:10%;
}
.content
{
height: 90%;
margin: 0px;
padding:0px;
}
#box1
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: red;
}
#box2
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: green;
}
#box3
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: blue;
}
#box4
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: orange;
}
</style>
<script type="text/javascript">
function SetHeightOfDiv(){
var viewportHeight = $(window).height();
var theDiv = document.getElementById('home');
theDiv.style.height = viewportHeight + "px";
}
</script>
</head>
<body onload="SetHeightOfDiv()">
<div data-role="page" id ="home">
<div data-role="header" id="header" data-tap-toggle="false"></div>
<div data-role="content" class ="content">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</div>
</body>
</html>
Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/
DEMO
function SetHeightOfDiv() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
/* content div has padding of 1em = 16px (32px top+bottom). This step
can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
}
You also need to trigger this on window resize and orientationchange:
$(document).on("pageshow", "#home", function () {
SetHeightOfDiv();
});
$(window).on("resize orientationchange", function () {
SetHeightOfDiv();
});
Related
I have an iframe border using CSS. As the page is resized the border sometimes disappears in Chrome and changes size in Safari (it's fine in Firefox)
Is there a known workaround?
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
Using other elements don't have the same issue
div {
max-width: 90%;
margin: 1em auto;
}
span, canvas {
display: block;
border: 1px solid black;
width: 100%;
height: 60px;
background: #eee;
}
<p>no issue with other elements</p>
<div>
<span></span>
</div>
<div>
<canvas></canvas>
</div>
note that it seems to have something to do with having a background color in the iframe. If I remove the background color the problem goes away in Chrome (though not Safari)
const html = `
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
Adding a wrapper div with overflow: hidden; and box-sizing: border-box; works for me.
const html = `
<style>
body {
background: #eee;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
.iframe-wrapper {
border: 1px solid black;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
iframe {
display: block;
width: 100%;
border: none;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<div class="iframe-wrapper">
<iframe></iframe>
</div>
</div>
I still see the issue on Chrome (not on Safari). It seems like a bug in visualization of the border (still).
One option could be to change the border to have a width of 0 and set an outline instead. Then this effect goes away. I don't know if it would be the best solution (outlines are used often to highlight focused/active elements), but it would be close to what you have.
Here is a demo just with that change:
const html = `
<style>
body {
background: #eee;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 0;
outline: 1px solid black;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
This is an antialiasing issue.
Chrome generally avoids rendering on floating pixels, to avoid antialiasing. It will try to move and resize to the next rounded pixels.
In this case, it will cut off your border instead of making it leak outside of the iframe.
You can force it by either moving or resizing your iframe by floating-pixels:
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
document.querySelector("input").oninput = function(e) {
iframe.style.marginLeft = this.value + 'px';
};
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 250.5px; /* force a floating pixel width */
background: red;
}
<p>Edit the range and watch the right border</p>
<input type="range" min="0" max="1" value="0" step="0.01">
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
I think you did good opening this issue, since it's definitely not the expected behavior.
And since you asked for a workaround, here is one, far from being perfect, which will cause double reflows at each resize event, but which should fix the bug...
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
addEventListener('resize', resizeFrame, {passive: true});
resizeFrame();
function resizeFrame(_){
iframe.style.width = null; // reset to 100%
// force reflow by calling offsetWidth which is already rounded
iframe.style.width = iframe.offsetWidth + 'px';
}
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<iframe></iframe>
</div>
But note that this code only takes care of resize events, if your iframe can resize from other events (e.g DOM manips, CSS etc.) then you might want to use a wrapper element on which you'd apply the width:100% and from a ResizeObserver's callback change your iframe's width:
const html = `
<style>
body {
background: #DDD;
}
</style>
<body>
<div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;
if(window.ResizeObserver) {
const observer = new ResizeObserver(entries => {
iframe.style.width = iframe.parentNode.offsetWidth + 'px';
});
observer.observe(iframe.parentNode);
}
else {
console.log('no support');
}
div {
max-width: 90%;
margin: 0 auto;
}
iframe {
display: block;
border: 1px solid black;
width: 100%;
background: red;
}
.iframe-wrapper {
max-width: none;
width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
<div class="iframe-wrapper">
<iframe></iframe>
</div>
</div>
That is, in Blink only for now...
For anyone looking for an answer to this in 2022 and none of the above works, this is the only thing that worked for me.
Add the following CSS to the iframe:
clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%);
.ifrmoutr{
border: 1px solid red;
width:100%;
overflow:hidden;
}
.ifrmoutr iframe{
width:100%;
}
<div class="row">
<div class="col-lg-12">
<div class="ifrmoutr">
<iframe></iframe>
</div>
</div>
</div>
the following code applies gray box to all <divs> I would like to apply the class to specific divs shall I add some id somewhere?
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
An ID (#idname), or better yet, a reusable class (.classname) would be appropriate for styling this element.
.caption {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
<h2>Calculate the total width:</h2>
<img src="http://placehold.it/350x263" width="350" height="263" alt="Klematis">
<div class="caption">The picture above is 350px wide. The total width of this element is also 350px.</div>
<!DOCTYPE html>
<html>
<head>
<style>
greyBox {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div class = "greyBox" >The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
You can also try this:
CSS
.newStyle {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
HTML
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div id="dvText">The picture above is 350px wide. The total width of this element is also 350px.</div>
JAVA SCRIPT
function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];
if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}
function hasClass(el, className) {
var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
return re.test(el.className);
}
addClass(document.getElementById('dvText'), 'newStyle')
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.
Here are the contents of my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
Home
</div>
<div id="prev">
next picture
</div>
<div id="next">
previous picture
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
Here are the contents of my style.css file:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* main-container */
#container-bild {
max-width: 100%;
max-height: 100%;
}
/* picture in main-container */
#img-bild {
max-width: 100%;
max-height: 100%;
border: 1px solid #280198;
}
Here is a screenshot of what it looks like:
To set the height and width to be 100% of the window (viewport) size, use:
height: 100vh;//100% view height
width: 100vw;// 100% view width
.
div {
background-color: blue;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
color: white;
}
<div>some content here</div>
Try:
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
As a reminder for my future self:
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
Though this is completely unrelated, for links, you might want to use something like:
a[href^="#"] {
text-decoration: none;
color: black;
background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
text-decoration: underline;
color: blue;
background: none;
}
I'm not sure if this is possible with css, it could be.
I have solved similar issue with javascript:
window.top.innerHeight;
gets the available height, excluded menubars etc. of the borwser.
See how I did for the height, my issue was that the footer should be at the bottom even if content was empty->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>
<body onResize="resizecontainer();">
<div class="divtop">
<div class="divtopcontainer">
<div class="divlogo">
</div>
<div class="divHmenu">
<style>
.mnuHorizontal
{
list-style:none;
}
.mnuHorizontal li
{
float:left;
}
.mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
{
background:#00B7EF;
border-radius:5px;
color:white;
}
.mnuHorizontal li a
{
display:inline-block;
text-decoration:none;
padding:5px 12px;
text-align:center;
font-weight:bold;
color:#020042;
}
</style>
<ul class="mnuHorizontal">
<li id="index.php">HOME</li>
<li id="features.php">FEATURES</li>
<li id="download.php" class="activemnu">DOWNLOAD</li>
<li id="contact.php">CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="divblueline"></div>
<div class="divcontainer">
<div style="float:left">
<h2>What is C-Driver Manager</h2>
C-Driver Manager is a simple tool that;
<ul>
<li>displays information about your devices</li>
<li>identify unrecognized devices by windows</li>
<li>Backups your devices driver</li>
</ul>
<h2>Why C-Driver Manager?</h2>
<ul>
<li>No installation needed</li>
<li>No adware</li>
<li>No spyware</li>
<li>Absolutely freeware</li>
</ul>
</div>
<div>
<img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>
</div>
<div class="divblueline"></div>
<div class="divbottom">
<div id="chmx">
</div>
</div>
</body>
<script>
for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
{
if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
"index.php")
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
}
else
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
}
}
resizecontainer();
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
</script>
</html>
look for this function inside the example above ->
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
This works great. This will keep your image from growing too large width wise and also keep its proportions.
img {
max-width: 100%;
height: auto;
}
My CSS solution is:
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
I have a canvas with height of 480. I am using Easeljs to load images in canvas . Each row contains 3 images. The images loaded beyond the height of canvas(480) are hidden. I need to add vertical scrollbar to view those images. How can i implement this.
thanks,
sathya
Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 300px;
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow: hidden;
background-color:green;
}
.vertical-scroll {
left:320px;
top:10px;
border: 1px solid green;
width: 20px;
height: 300px;
}
.vertical-scroll div.bar {
left:0px;
top:0px;
width: 20px;
background-color: blue;
height: 20px;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var wrapper;
var canvasHeight;
var vScrollHeight;
var canvasWrapperHeight=300;
$(".bar").draggable({
containment: "parent"
});
$(".bar").on("drag", function (event, ui) {
var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
canvas.style.top = ctop + "px"
});
var img=new Image();
img.onload=function(){
canvas.width=this.width;
canvas.height=this.height;
canvasHeight=this.height;
vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
document.getElementById("vbar").style.height=vbarHeight+"px";
ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
}
img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div class="wrapper" id="wrap1">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
<div class="vertical-scroll" id="vscroll">
<div class="bar" id="vbar"></div>
</div>
</body>
</html>
wrap the canvas with a div, then set a height for the div, and finally apply overflow-y:auto and overflow-x: hidden property to the div.
overflow-y:auto shows the vertical scrollbar when needed
overflow-x: hidden hides the horizontal scrollbar
http://jsfiddle.net/V92Gn/3509/
<div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
<canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
</div>
I don't know about any ScrollBar-Solutions for EaselJS and it's not possible to do this via HTML.
So you would have to code your own scrollbar, if you have trouble with that, there should be a quite a few tutorials for that to be found online for ActionScript3 you can easily adapt those for EaselJS.
Another option would be to extend the height of the canvas itself and add a scrollbar to it's parent container, I'm not sure though if that'd be a very good solution.
I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.
Here is a link to the layout so far
You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.
Here is the current HTML:
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}/* end hide */
body {
background: #FFFFFF;
color: #fff;
height:100%;
min-width:800px;}
#inner {
position:relative;
width:100%
}
#wrap {
min-height: 100%;
margin-left:50%;
position:relative;
background:#F9F9F9;
color:#000;
z-index:1
}
#center_col {
float: left;
width: 800px;
height: auto;
margin-left:-380px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
background:#FFFFFF;
}
#sidebar {
width:204px;
height: 100%;
padding-right:26px;
float:left;
min-height:234px;
position:relative;
background: #FFFFFF;
}
#content {
width:570px;
height: 100%;
min-height: 100%;
position:relative;
float:left;
background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;
padding-top:21px;
padding-bottom:48px;
}
.postunit {
width: 500px;
margin-left: 30px;
padding: 10px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #F9F9F9;
}
.sidebar {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 50px;
padding-left: 10px;
float: left;
height: auto;
width:200px;
-moz-border-radius: 10px;
border-radius: 10px;
}
p{
padding:5px;
margin-bottom:1em;
}
</style>
<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="center_col">
<div id="sidebar">
<div class="header">
<h1>{Title}</h1>
<p>{Description}</p>
</div>
{block:ListSidebar}
<div class="profile">
<a href="{ProfileLink}">
<img src="{PortraitURL-45}" width='75' height='75'>
</a>
<p>{Profile}</p>
</div>
{/block:ListSidebar}
</div>
<div id="content">
<div class="posts">
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
{block:EditBox/}
<div class="post">
<h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
<a class="button" href="{Permalink}">Posted {TimeAgo}</a>
{Body}
</div>
{block:Responses}
{block:ResponsesList}
{/block:ResponsesList}
{block:Sharing}
{block:Tweet /} {block:FbLike /}
{/block:Sharing}
<div class="postresponses">
<a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
</div>
{block:ResponsesShow}
{Responses}
{ResponseForm}
{/block:ResponsesShow}
{/block:Responses}
</div>
{/block:Posts}
</div>
{block:Pagination/}
</div>
</div>
</div>
</div>
</body>
</html>
Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!
If you are using jQuery:
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$("#sidebar").height(height);
});
</script>
where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >
If your layout is going to stay this simple, I say just fake it with a nice little background image =)
If that won't do, I think JS is your only way to go.
e.g.
window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
var myHeight;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
document.getElementById('content').style.height=myHeight + 'px';
}