http://jsbin.com/iGIToRuV/1/edit
Currently, I am working on developing a WYSIWYG website designer as part of an experimental project for various purposes. The ultimate goal is to ensure that it is both desktop and mobile-friendly.
However, I have encountered a challenge in making the div#canvas fill 100% of the page width and height. Interestingly, the div#canvas does not even appear in Firefox, which has left me puzzled about the root cause.
Allow me to explain further...
The positioning of my div#canvas is set correctly, while the div.options is placed with right:0; and a width of 291px. My objective is to instruct the div#canvas to expand to cover the entire body width without overflowing beyond its limits.
I hope this description clarifies the issue, but if you prefer a visual aid, feel free to refer to the design prototype created specifically for this query.
Here is the HTML code:
<body>
<header class="header">Links</header>
<div class="toolbox">Tools</div>
<div class="content" id="canvas"></div>
<div class="options">Options</div>
</body>
And here is the CSS code:
/* Canvas */
#canvas {
position:absolute;
top:81px; left:44px;
width:100%; height:100%;
}
.header {
position:absolute;
top:0; left:0;
width:100%; height:81px;
}
.toolbox, .options {
position:absolute;
top:81px; height:100%;
}
.toolbox { left:0; width:44px; }
.options { right:0; width:291px; }