Develop Reference

how do I make a element the size of the screen but not resize again?

REFERENCE: http://www.templatewire.com/preview/landscaper/
I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.
Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.
The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.
Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.
(I want it to be the height of the screen minus the height on the nav bar.)

You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.
Since you didn't place your code, this is generally example of use case:
section { min-height: 100vh;}
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Good luck!

It appears you're looking for viewport percentage lenghts.
To give any element current viewport's height, in CSS, one should use:
your-selector {
height: 100vh;
display: block;
}
If the element is a <div> or any other element with a default value of block for display, it obviously doesn't need the second rule.
See it working:
your-selector {
height: 100vh;
display: block;
transition: background-color .3s linear;
}
/* let's add a hover, for testing */
your-selector:hover {
background-color: red;
}
body {
margin: 0;
min-height: 200vh;
}
<your-selector>Test</your-selector>
Note: you can also apply viewport percentage lengths to other properties, such as min-height, max-height, etc...
Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.

HTML5 Canvas Always Has Scrollbar

I have this canvas on my webpage, but whenever I load it, whichever way I resize the screen, it always ends up with a scrollbar for the horizontal and vertical axes. How can I fix this? My monitor does have a different aspect ratio, so does that affect it in any way? I can't really give any refernce code as the only time I even mention the width and height is the first time I set the values:
canvas.width = 1280;
canvas.height = 720;
Help would be really appreciated, I'm in a sort of crisis right now XD
EDIT:
This is sort of irrelevant, but here's all my code on codepen

Just add box-sizing:
canvas {
box-sizing: border-box;
border: 1px solid black;
height: 100vh;
width: 100vw;
}
The reason the scroll bars appear is that the canvas element uses the border that exceeds the window boundaries.

Try the vh and vw property of css. Should use your screens vertical height as the default. Should help. Set them to 100.

Inline block auto fit to child width when child resize height

I have slider populated with images in containers and every container has display inline-block.
Main slider has fixed width (for example 768px) and adjustable fixed height. I want child images and its containers fit in that height, and keep image proportions. When i change main slider height dynamically in developer tools or with Javascript, image container divs stay with same width and I have some empty space between every image in line (Images inside containers are scaled and keeps aspect ratio).
I try with:
.image{
display: inline-block;
width: auto;
height: 100%;
}
but problem persists.
Can I fix that only with CSS?
FIDDLE

You have to force the .image element to recalculate its size in any case i think that you have to use js
you can do this:
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$(".image").css('height', 200);
}
or:
JS
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$("container").addClass('reduced');
}
CSS
.reduced .image{
height: 99%;
}
Anyway I hope you take the idea, just force it to change its size, changing properties like padding, border, works too.
I hope this helps

How to apply a responsive CSS height to an element using min/max-height and height?

I'm trying to expand a Dygraph to the maximum available dimensions of it's parent container.
Technically the graph is resizeable, either by using a re-rendering method or by specifying an absolute container like in this example.
Problem is, the plugin expects hardcoded values, otherwise it will calculate something arbitrary - see this link for explanation, which says:
// For historical reasons, the 'width' and 'height' options trump all CSS
// rules _except_ for an explicit 'width' or 'height' on the div.
// As an added convenience, if the div has zero height (like <div></div> does
// without any styles), then we use a default height/width.
I have been playing around with the following setup:
<div class="graph_wrap">
<div class="graph_container">
<!-- graph will be here -->
</div>
</div>
I managed to stretch the graph WIDTH to 100% by setting this CSS:
html .ui-graph {
width: 100%;
min-width: 1px;
}
but without specifying a height, the plugin overrides my CSS and doing this:
html .ui-graph {
width: 100%;
min-width: 1px;
/* height... */
height: auto;
max-height: 100%;
min-height: 100%;
}
does not work. Only if I add something like height: 20em, the plugin does not overwrite my set CSS.
Question:
Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else.
does

There is no way to force the browser to maximum height. You can write css like
.max_width{
width: 100%;
}
this will make the container 100%.
But the height will be determined by the height of the elements inside.
This can be solved using javascript though.

You can do it multiple ways:
The way It looks like you are doing is having the graph stretch with the browser window.
height: 10vw; /* viewport width */
or
height: 10vh; /* viewport height*/
these are different, so experiment what you want. This will definitely resize it.

In the resize-to-browser example you provided, the element is scaling to the parent container just as you wanted. You can then apply your sizing rules to the container (#div_g), not the graph itself.
In that example, adding this will make the graph scale with the browser height until it is 300px tall:
#div_g {
max-height: 300px;
}
All of the graph generated elements are calculated with JavaScript. That's why CSS doesn't work for them. So style the container, and let the graph itself resize it to fill that container.
You should be able to use position: relative; instead of absolute, if you want your graph to be positioned with other elements.
"Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else. does"
Traditionally the height of the html document is the same height as what it contains, like any other block element. You can stretch this to fit the browser height using the following:
html, body {
height: 100%;
margin: 0;
}

HTML5 How to make canvas not stretch page?

I have learned how to work with Canvases in HTML5, and I have a question.
Is there a way to make a canvas not stretch the other elements on the page? For example I have some text, if I put a canvas of 500px wide, the text is sent to the right to make space for the canvas, is there a way to put the canvas under the text or simply make it not stretch the other elements in the page, or is there simply a technique used to appropriately position canvases in a way so that it is where you want it to be exactly?
Thanks for your help.

Just treat the canvas as you would treat a div. The way you size/position a div, you can do the same with canvas. If you are having a specific problem adjusting the canvas, post the code you are using.
Edit : Also, be careful if you are setting canvas height/width with CSS as it only changes the element size, not the drawing surface size. To make sure both the element and drawing surface size changes, use the width and height attribute.

You should include the width and height attributes in the canvas element.
canvas.width = 600;
canvas.height = 600;
If you want to fit to screen automatic see question below
Resize HTML5 canvas to fit window

Use css-style z-index to make your text above canvas.
Sample css:
#canvas_id
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:-1;
}
#text_div
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:0;
}

A canvas is a flow element. You can position it exactly as you do with other flow elements, for example a div. It has default dimensions (300 x 300) but otherwise behaves mostly like a div.
To go on the next line, you may do this :
aaa
<br>
<canvas id=a></canvas>
There are so many possibilities with CSS (the same than with all flow elements) that it'd be hard to list them.