Is there a simple CSS-only solution to make a HTML5 canvas to fill the entire space between a header and a footer?
The height of header and footer is known and fixed, all elements should have 100% width. Key point here is the simplicity of markup and style, and to avoid wrapper divs.
This is my markup:
<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer"><p>footer</p></div>
While the problem of a full-height div between header and footer seems to be a lot easier to solve, and there are on SO already some very fine answers, i cannot figure a way to get the same with a canvas.
Fiddle: http://jsfiddle.net/h7smdykf/
Do you mean like this?
Edit: Jep, they are right, streching the canvas skrews up your elements. I got a little further with "object-fit" https://www.w3.org/TR/css3-images/#the-object-fit
Using "object-fit" is suggested from https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element
Edit2: There is still a problem with the vertical alignment. The Circle should be in the middle of the page.
z-Index solves the problem.
var c=document.getElementById("content");
var ctx=c.getContext("2d");
var x = c.width / 2;
var y = c.height / 2
ctx.beginPath();
ctx.arc(x,y,50,0,2*Math.PI);
ctx.stroke();
html, body {
margin: 0;
padding: 0;
}
.header, .footer {
position: fixed;
width: 100%;
height: 48px;
left: 0;
background: lightgreen;
z-index: 1;
}
.footer {
bottom: 0px;
}
.content {
position: fixed;
width: 100%;
height: 100%;
object-fit: scale-down;
background: lightblue;
z-index: 0;
margin: 48 0 48 0;
}
<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer">footer</div>
Related
I'm new to css and not sure how to do this.
I have a parent div that has a fixed height and a child div that has a fixed width with horizontal scroll overflow. The problem is that the child divs horizontal scroll is hidden on the bottom of the div. Is there a way so that the child divs horizontal scroll can be displayed as in the attached picture?
Thanks
My approach with jQuery, take a look at this fiddle!
Explanation
This version is desktop & mobile (Touch) compatible. Here, #scroller a hidden div with a horizontal scroll-bar to capture the scrolling and adjust the #inner div's scroll position.
Maximum horizontal scroll ranges can be different between #scroller & #inner, so I'm mapping from one range to the other.
HTML
<div id="outer">
<div id="scroller">
<div id="expander"></div>
</div>
<div id="inner">
<h1>This is looong text for testing</h1>
</div>
</div>
CSS
#outer {
width: 100%;
height: 300px;
border: 3px solid red;
overflow-y: scroll;
position: relative;
}
#inner {
width: 50%;
height: 700px;
border: 3px solid blue;
overflow-x: hidden;
}
#scroller {
height: 300px;
width: 50%;
position: absolute;
top: 0;
left: 0;
overflow-x: scroll;
}
#expander {
width: 200%;
height: 1px;
}
h1 {
width: 700px;
}
JQuery
$("#outer").on('scroll', function() {
var oTop = $("#outer").scrollTop();
$('#scroller').css('top', oTop);
});
$("#scroller").on('scroll', function() {
var scrollerMax = $(this)[0].scrollWidth - $(this).width();
var innerMax = $('#inner')[0].scrollWidth - $('#inner').width();
$('#inner').scrollLeft(mapRange($("#scroller").scrollLeft(), 0, scrollerMax, 0, innerMax))
});
function mapRange(x, in_min, in_max, out_min, out_max) {
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
try using position:absolute for the child div.
if you could post the code i can show you how on your specific example
I finally got a sticky footer to work with a push div. Unfortunately, I now have a strange block above my wrapper that has shown up. I would like to get rid of this of course.
Site in question:
http://print503.squarespace.com/gallery/
Basic HTML structure:
<body>
<div id = "wrapper">
[all content divs (dynamic/responsive)]
<div class = "push">
</div>
</div>
<div id = "footer">
</div>
</body>
Basic CSS Structure:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
z-index: 1;
}
.push {
opacity: 0;
height: 50px;
bottom: 0;
}
#footer {
background-color: #000;
height: 200px;
bottom: 0;
}
So I'm overriding the template for this squarespace site with my own HTML and CSS. I think the wrapper (named "#outerWrapper") is a background image. I don't know if this is what is causing the problem with the block at the top that now appears.
I've done hours of research and cannot figure out this issue. Would love some help. Thanks in advance.
Adding
#outerWrapper {
display: inline-block;
}
seems to fix it, if that's what you're going for (to get rid of the top black bar and have the background image show all the way to the top).
I have a div with a background image that will overlay part of the header slideshow. I want the width of the div to always be 100% of the window size, even when the user re-sizes it. The height should change based on the aspect ratio of the background image. The dimensions of the background image is 1500x406.
Here's the sample code:
HTML
<div id="wrapper" class="clearfix">
<div id="bg_img"></div>
</div>
CSS
.clearfix {
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
position: absolute;
z-index: 100;
top: 9em;
width: 100%;
height: 406px;
margin: 0 auto;
display: inline;
}
The working JSFiddle
To make an element maintain proportions you only have to use this code
<div id="some_div"></div>
#some_div:after{
content: "";
display: block;
padding-top: 100%; /* the percentage of y over x */
}
So this is how to achieve it. Demo
<div id="wrapper">
<div id="bg_img"></div>
</div>
<div class="clearfix"></div>
N.B. clearfix isn't required for this solution, OP had it in his code.
CSS
#wrapper{
position: relative;
width: 100%;
}
#wrapper:after{
content: "";
display: block;
padding-top: 27.06666%; /* 406 over 1500 */
}
#bg_img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://placekitten.com/1500/406);
background-size: 100% 100%;
}
This is what I've used in the past to support back to IE8. Used in conjunction with a small js plugin here that supports the filters: http://louisremi.github.io/jquery.backgroundSize.js/demo/
img {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";}
background-position:50% 0;
}
I found a solution which is simple and works great for me. Create a transparent PNG for the aspect ratio you desire, e.g. 15px x 4px.
put the image within the div. Set the image's width to 100%. It will expand to the div's width and grow in the proper aspect ratio vertically, pushing the div's height down to the proper aspect ratio.
Something like this (this exact sample untested):
<div style="width: 100%">
<img src="..." style="width: 100%" />
</div>
You could, of course, do this with the other dimension (height) as well by defining it instead of width.
Simple enough. Works for me.
--
Andrew
This somewhat distorts the image, but it might be what you are looking for:
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
min-width:100%;
min-height:100%;
background-size:cover;
}
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
Redesigning my website, in my CSS I have a div of height: 200px; then an image under it with a height: 532px; then lastly a div of height: 100%;.
The last div is not filling the rest of the page, is there something I'm doing wrong?
P.S. - All divs are in a container. All containing divs have height: 100%;
I have since changed it, so I no longer require this.
First, you need to set the height of html and body to 100%.
Then if you want to cover the rest of the page with that div you should do something like:
div{
height: -moz-calc(100% - 732px); //732 = 200 + 532
height: -webkit-calc(100% - 732px);
height: calc(100% - 732px);
}
Hope this will help....
You really need to post your html.
I suspect that the problem you are having though could be solved by setting the height of the html and body tags to be 100% too. Like :
html, body{
height:100%;
}
If the div did indeed obey the height: 100%, it would have the same height as the container, conflicting with the elements above it.
Without using Javascript to compute the height, or note widely supported modern CSS extensions, you must fall back to absolute positioning. The only down side is you must manually enter the top of it.
http://jsfiddle.net/NnD2u/
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.
.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }
.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }