Im using this css property to clip the content inside a div:
div {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: none;
width: 200px;
}
At the momment you see the height and width of the clipping area is fixed to 100x200. I want to mantein the fixed width but I need the height to be auto, I mean, relative to the div content. Is this possible? I tried:
rect(0px,200px,auto,0px)
rect(0px,200px,100%,0px)
But they seam to not work. Any suggestions?
Is none a valid value of overflow? Should it not be hidden?
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Related
http://jsfiddle.net/yLt5v/
.tc{
position: fixed;
width: 100%;
}
When giving position:fixed for .tc the background is overflown.
How to solve this?
Set percentage and display block
.tc{
position:fixed;
width:54.5%;
display:block;
}
DEMO
Assigning an element position:fixed; makes it relative to the BODY element and it will no longer follow the width of the parent element so the width 100% expands it the full width of the page. Now since you have no "left" position declared it will keep alignment after the parent element and the excess width just gets overflown to the right.
Can you solve your problem by adding left: 0; top: 0;? Without left the fixed element starts at his own position and have 100% width of viewport.
I have a parent container div with display: inline-block. This allows me to adjust the image height using % values. I can't adjust the width beyond 100% though which I need.
How in css/html can I setup a parent div and child image so that I can use % values to scale the image larger then the parent and position the image top and left with % values?
for example:
div {
width: 50%;
}
img {
width: 150%;
margin-right: -50%;
}
JSFIDDLE
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 :)
I want to use margin in my code, but I have some problems.
Please look at:
<div id="outer">
<div id="inner1">
Margin not coming from top (not absolute)
</div>
<div id="inner2">
Div has absolue prop
</div>
And the CSS code is:
#outer {
margin: 100px;
background-color: green;
height: 300px;
widht: 400px;
}
#inner1 {
margin: 10px;
background-color: red;
}
#inner2 {
position: absolute;
margin: 20px;
background-color: blue;
}
I am not able to understand why setting position to absolute is
restricting width of #inner2 div.
Since #inner1 div does not have absolute property, it is not having
margin from top. I can't understand this. Please explain.
Here is output: jsFiddle
Ques1: I am not able to understand why setting position to absolute is restricting width of inner2 div.
setting position to absolute of inner2 div, gets the width auto so as long as text.
setting position to relative of inner2 div, gets the width of outer div.
So if you want absolute positioning, set also the width of inner2 div.
Ques2: Since inner1 div does not have absolute property, it is not having margin from top. I can't understand this. Please explain.
from the document flow, your inner div never know it is inside some other div (outer), setting border or position to absolute of outer div fix this.
fiddle http://jsfiddle.net/C7dE2/20/
setting
position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width if that is the effect you're after..
see this
absolute vs relative position width & height
You should use green div's padding-top property - #inner1 with margin-top set on high value only pushes the whole #outer further down!
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.