Monday 15 April 2013

javascript - css size and margins with percentages -


So I want to create a page that will always fill the full screen and keep it well. The following code works very well:

  #posts {width: 100%; Height: auto; Background: # 666; } .entry {float: left; Margin-left: 4%; Margin Top: 10px; Margin-down: 10px; Width: 20%; Height: 100px; Background: # 000; }   

There is a problem ... it breaks down in the size of the window. I am just curious why it does not work when the size of the window changes, because this fact Due to that margins and sizes are done with percentages, they should be transformed into the right people, right?

My questions are:

When the viewer changes the window size, then why do not percent percentages of CSS work properly, and what can I do that Will change correctly?

After loading, shape your window to actually look. I'm actually speaking about the problem.

EDIT1:

On the basis of the answers so far, this is an issue that I want to contradict with masonry elements To provide a full position, the way it will be fixed, it is with some javascript / jquery line that can repay the margins on windows resize according to the correct percentage ... how can I do this ?

position: absolute; Property is determined by masonry. Blockquote>

An element that is completely transferred takes it out of the flow and there is no space to hold other elements in this way

If you remove that line, then it works fine, check

update:

Normally you need masonry If all your elements are of equal width and height. This small script is running, which will work with your current html implementation.

  $ (". Entry"). Each (function () {var $ this = $ (this) var currLeft = 0; var containerwidth = 0; var newLeft = 0; currLeft = parseInt ($ this [0]. Style left, 10); containerwidth = parseint ( $ ("#post") width (), 10); NewLeft = currLeft / containerwidth * 100; $ This.css ({"left": new left + "%"})});   

How does, curlLeft take place in the script and calculates in newLeft percentages.



No comments:

Post a Comment