My CSS:
body
{
margin: 0;
height: 100%;
}
canvas
{
background-color: black;
height: 100%;
width: 100%;
}
html
{
height: 100%;
}
As you can see, my body is as tall/wide as the window's available height/width respectively. My canvas has 100% height/width, and it seems like it should be the height and width of the inside of the window. But it isn't. It's a few pixels taller, and a scrollbar appears. Why is this? Can I make it work somehow? I don't think the canvas has any padding or anything. This occurs in both Chrome and Firefox.
You also need:
canvas { display: block; }
since canvas is an inline element, like img.
Inline elements get some "leading" underneath, just like the surrounding text does.
The browser may be getting confused: With the scrollbars, the canvas is too big to fit. Without them, it fits.
Ignore that, complete nonsense. <canvas> is an inline element, so it suffers the same problems as images. Add verical-align:bottom, or try this instead:
canvas {
background: #000;
position: fixed;
left:0; right:0; top:0; bottom:0;
}
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
I am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
I want to make a div resizable with resize css property:
#foo{
overflow: hidden;
resize: both;
}
I can freely resize it with firefox.
with chrome/safari I can't resize it smaller than initial size.
their is a way to allow resize smaller with webkit? (min-width / min-height don't works)
see the live exemple from MDN (with 2 nested divs)
https://developer.mozilla.org/samples/cssref/resize.html
Better solution is to use :active pseudo class e.g:
div:active {
height: 0;
width: 0;
}
Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/
There is a small workaround that I found here, but it does work.
On hover, change the height and width to 1px
#foo:hover{
width: 1px;
height: 1px;
}
It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.
I've been trying for hours but can't make it to work better than the hack, if I could just trigger a userresize I would be happy setting chrome's width to min-width then trigger resize to put it where I want, since it seems that you can move it back to original position after moving. But I don't find how to.
Using that live example as a reference, I was able to set the initial size to be equal to the width and height of the div, and the min-height and min-width to be the minimum dimensions allowable in Chrome.
#foo {
resize: both;
overflow: scroll;
width: 300px;
height: 300px;
min-width: 50px;
min-height: 70px;
}
div {
background-color: #acacac;
border: 1px solid #000;
}
<div id="foo"></div>
The problem is simple:
http://jsfiddle.net/boblauer/wfLGG/
In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.
I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.
Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.
I think this is maybe helpful
.scroll-container {
overflow: auto;
padding-top:20px;
}
#ex2 span{
position:absolute;
background:white;
}
jsFiddle
Set overflow: y-scroll; on #ex2 and it will behave as #ex1.
#ex1, #ex2 {
float: left;
height: 100%;
width: 45%;
border: 1px solid black;
overflow: auto;
}
#ex2 { overflow: y-scroll; }
Demo
I came across the website http://www.swiftkey.net.
On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.
How do they acheive this effect?
Using firebug, I was able to decipher what I think MIGHT be doing this:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.
I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:
The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
The grey bars are created by having a background color on the <body> or <html> elements:
body {
background-color: #888;
}
I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.
This has to accomplished with javascript screen object
var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;
availWidth and availHeight gives actual available width and height, considering taskbars and scrollbars etc.
width and height give the actual screen resolution. Then access the variables and decide the type of layout.
However adjusting anything to center is easy
div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}
the javascript screen width tracing is for more control options