kineticjs generates a div container to wrap a stage canvas. But it sets this div's display attribute as display:inline-block.
I would like the canvas is displayed in full screen without scroll bar in browser. But with display: inline-block, there are always scroll bar displayed.
If I can set display as auto, the scroll bar will disappear.
Is there any way to set the css style for the div generated by kineticjs?
Thanks in advance!
I had the same issue a few weeks ago. I also didn't want the scrollbars to be visible, because my canvas is always scaling to full-screen. I worked this out by setting the complete html/body to overflow:hidden;
Complete CSS of my html, body:
html, body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
To set the div at full-screen you simply have to set its width and height to 100%:
#container{
width: 100%;
height: 100%;
}
And last but not least, set the width and height of your stage to:
width: window.innerWidth,
height: window.innerHeight
I hope this could somehow resolve your problem :)
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}
I would like to scroll within a div whose height extends below the browser window without scrollbars appearing on the browser window.
When I add an overflow:hidden style on the body tag this works as long as the div height is < the window height. How can I get the same effect when div height > browser window height?
Is the div height greater than the window height because you have set it that way in css or is there just a lot of content inside the div?
If you have already set its height in css, you might have to wrap it in another div first. Otherwise, try this:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 50%;
overflow-y: scroll;
}
Example
I have a DIV of size 147x88 and inside it an image which has the same width, but might be larger in height. In this case, the image goes beyond the boundary of the DIV. Is there anyway to clip the image, keeping in mind that I want my page to work in old browsers which doesn't support CSS3 (IE7 and IE8)?
Just hide the overflow of the div, and the containing image will be cropped to the dimensions of the div.
div{width: 147px; height: 88px; overflow: hidden;}
Set overflow:hidden; on the div:
#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}
Example: http://jsfiddle.net/purmou/sN5PL/
div { width: 147px; height: 88px; overflow: hidden; }
This question shows how to get the size of the image using JQuery.
You can have a little block that checks the size of the image when loading the page, and the set the size of the DIV accordingly.
I am create a div with 100% height
HTML
<div id="BottomShelf"></div>
CSS
#BottomShelf{ position:absolute; top:400px; left:0px; width:100%; height:100%;; background:#d4b7a0; z-index:1;}
There is a page scroll showing up on the page, but I need a page scroll (not div scroll) only when there is content. height:auto does not do the trick too.
I need the div to take the browser height irrespective to the height of the monitor.
try to set top: 400px; bottom: 0; instead of top: 400px; height: 100%;
EDIT: note that this might not work in IE6 (don't know about IE7)
The body tag has some default margin, so if you need a div to take the place as body, first set the body style to: margin: 0;
I tried creating a div with the following styles, and it seems to do what you want:
height: 100%;
overflow: auto;
overflow: auto will give the div a vertical scrollbar if the content exceeds the height.
Have you tryd the overflow:hidden; css style property?
Sorry it was overflow:hidden;