Comments (5)
@thierryk did you test this, or is this an assumption?
from fluidity.
@mrmrs There is no need to test this and it is not an assumption either. I came up with this "hack" and at the time the dimensions were necessary because IE6 fails to stretch the box using offsets alone (top
, right
, bottom
, left
).
Check my article on YUIBlog:
The size of the box may be the result of the top, right, bottom, and left property values. For examples, zeroing out all properties will make the box stretch to match the dimensions of the padding box of its containing block. See zeroing out all box offsets (note: ie6 does not stretch the box).
from fluidity.
@mrmrs I forgot to mention that it would have been different if you did not have the following rule:
img,
canvas,
iframe,
video,
svg,
select,
textarea {
max-width: 100%;
}
because that max-width
prevents the box from stretching outside of its containing block.
from fluidity.
@mrmrs As a side note, I see little value in the z-index
declaration in your original rule since this kind of inner box is not really meant to have siblings.
Makes sense?
from fluidity.
@mmrs forget what I said. It seems there is an issue related to iframes (in Chrome at least) where the box extends beyond the boundaries of its containing block and width
and height
appears to fix that issue. This means it is not the dimensions declarations that appear to serve no purpose but the right
and bottom
offsets. The iframe issue (what I did test in Chrome) shows this by modifying the box dimensions (to the desired size) once width
and height
are added ignoring the offset values.
from fluidity.
Related Issues (10)
- What is the point of one line css called a responsive framework? HOT 8
- Fluid iFrame height HOT 1
- Consider adding form elements HOT 2
- Bower support? HOT 1
- why "overflow-y: scroll;" on .table-container?
- Add to cdn and provide link HOT 2
- Where is the wesite ? HOT 1
- Add marquee tag support
- Specify Version of Supported Browsers. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluidity.