stretching div across page does not work - javascript

I must be missing something very obvious but I'm simply trying:
<div style="width:100%;height:100%;background-color:gray">
bla
</div>
But the div does not stretch across the page.
See jsfiddle
Why does this not work and how can I make it work ?

Check this out https://jsfiddle.net/5o65ptcr/2/
Apply this CSS to HTML and Body:
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
}
The problem is that the HTML and BODY tags have default margin (behaves like padding) applied to them in the user-agent stylesheet (the stylesheet that is built in to the browser).
UPDATE: Considering the question, I thought you meant the "entire width of the page" and not the entire height. I have updated my question to include both the entire width and entire height. Please be sure you explain your question accurately.

<div style="width:100%;height:100%;background-color:gray;position:absolute;top:0;left:0;">
bla
</div>
Divs are relative to their parents. So if the body element doesn't have height 100% also then the div can't stretch across the screen. You would have to position it absolute then it would stretch across the page as it's not longer restricted by it's parent and moved to it's own layer.

Give height:100%; to html and body.
body,
html
{
height: 100%;
padding: 0;
margin: 0;
}
Jsfiddle

Try substituting vw , vh css units for %
<div style="width:100vw;height:100vh;background-color:gray;">
bla
</div>
jsfiddle https://jsfiddle.net/4Ld4p68L/4/

Related

How can I let a parent element behave exactly like its child in terms of size?

For example, if I place
<div>
<img ...>
</div>
somewhere and then apply the styles width, height, max-width, etc. to the div element, I want the result to look exactly as if I had placed the img element there and applied the styles to it.
Is this possible using CSS? If not, is it possible using JavaScript?
Edit: For clarification. I'm not looking for a solution to a specific case. Rather, I'm looking for some sort of pattern to replace img elements with div > img elements, without changing the look. The pattern should work in as many contexts as possible.
You could simply use
img {
width: 100%;
height: 100%;
display: block;
}
However, this will most likely result in a distorted image (i.e. width to height proportion), except if you define width and height exactly in the proportion to each other which corresponds to the image proportions.
Set the css property display to inline-block.
Here is a snippet (div border is in blue):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
box-sizing: content-box;
display:inline-block;
}
</style>
</head>
<body>
<h1>
<p></p>
<div id="example1"><img src="https://lh4.googleusercontent.com/-Y6mZ3dizRWA/AAAAAAAAAAI/AAAAAAAAAZ8/lC8SUn_bjkU/photo.jpg?sz=48"></img></div>
</body>
</html>
Yes, if you set width: 100% and height: 100% to your image it will take the size of your div.
But your image will be stretch that way, you may only want to specify its width or height or if you want a smart way to fill a div with an image prefer a background-image with a background-size to cover or contain.
PS: A image tag is a unique tag : <img> not <img></img>

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

HTML: Who takes care show/hide the scrollbar?

I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
It's like in this picture:
You may think of it like:
html { overflow: auto; }
So if want to hide the scroll bar on purpose, I would do:
// myCSS.css
html { overflow: hidden;// override default }
If I want to scroll to a position of the body:
var position = 500;
$('html').animate({scrollTop: position}, 1000);
This sounds all promising. But I used FireBug to check the height of the html tag, they are always greater or equal than the size of body. (Assuming a default webpage with no css, and contents in body exceed window size) The html tag size is not really the size of the browser window, and it is more of the size of body element.
So where does the scrollbar really come from? How does the scrollbar really work?
I read some online articles and they say that html tag represent the
browser window, so html is equals to the browser window size. If the
body size is greater than the html size, then the scrollbar will show
up. So it is the html element that controls to display the scrollbar
or not.
That's very wrong indeed.¹
What the CSS 2.1 Spec section 9.1.1 says is
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
Yet that doesn't seem quite correct either, since a scroll is not generally provided to move the viewport over areas of the canvas that have a negative x or negative y value, even if content is painted there.
The best I can establish is that the scroll bars are made available to move the viewport over the areas of the canvas which have a rendered box for 0 or positive x and y co-ordinates.
Whatever, neither the size of the html element box, nor the body element box are special. They are just rendered boxes on the canvas, the same as other elements. Other elements may be rendered outside those boxes, because of overflow or absolute positioning and the scroll mechanism will take the full size of those elements into account.
An example and diagram may help understanding. Consider this example:
<!DOCTYPE html>
<html>
<head>
<title>Scroll limits</title>
<style>
html { padding:20px; border:1px green solid; height:80px; }
body { margin:0; border:1px black solid; height:150px; }
#div1 { position:absolute; top:-50px; height:65px; left:-50px;
width: 65px; background-color:blue; }
#div2 { position:absolute; top:200px; height:65px; left: 110%;
width: 65px; background-color:yellow; }
</style>
</head>
<body>
body
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>
JsFiddle
results in this:
¹ The online article probably, and the picture in the question definitely, come from http://phrogz.net/css/htmlvsbody.html. It should be noted that that article was written in 2004. In 2004, what the then draft CSS 2.1 said didn't really matter. What mattered was what IE6 did, and the article does describe what IE6 did.
This works:
html {
height:100%;
width:100%;
overflow: hidden;
}
Scrolling has to do with overflow. When the body overflows the document.documentElement (the html element) the scollbar/bars appear. While other Elements' overflow defaults to visible the html tag defaults to scroll. To answer your question, the scrollbar appears on the parent of the overflowing content, when the parent's overflow is set to scroll, in this case the html tag.

Leave space at the top of every printed page

So, I have a header that needs to appear at the top of every page when the user prints this website. I'm setting position to fixed to get it to appear at the top of every page, but the problem is that the header is now overlapping some of the content near the top. The header is a static size, so if I could just put a margin X number of pixels at the top of every page that would solve my problem, but I can't find a way to do that. Thanks.
Example code:
HTML
<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>
CSS
header {
position:fixed;
top:-10;
height:20px;
}
#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}
The "top:52px" worked to get the content to avoid the header, but it was also causing some lines of text to be cut off in the middle by a page break, which is why it's commented out.
New info:
Something interesting I discovered about the "top:52px" line: it's not actually moving the content down 52 pixels, it's somehow hiding the top 52px of content on every page. I noticed this when I set header display to none and noticed significant portions of my content still missing.
Note: I'm open to javascript or jquery solutions if one exists.
Finally figured this out:
#content {
position:relative;
display:table;
table-layout:fixed;
padding-top:20px;
padding-bottom:20px;
width: 94%;
height:auto;
}
This puts padding at the top and bottom of every page, does not cut any content off from the top or bottom, and allows #content to respect width adjustments so that content doesn't get cut off on the right side of the page.
Lots of different ways to do this, one quick way would be to just use a div tag and set the margin-top to however many pixels you want:
<div style="margin-top:20px"></div>
simply add to #content:
#content {
margin-top: 50px; // however many pixels you need
}
I think you should read about CSS #media print and #page rule margin property here.
In my case, I only added a padding-top: XXpx and that was it. The css worked fine in all pages

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on

Categories