Databases
StackOverflow2013
Postsdbo
POjQuery: get actual height of element (or its children) when css min-height is set?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: get actual height of element (or its children) when css min-height is set?
    primarykey
    data
    text
    <p>I have <code>div.box</code>es with multiple elements in it, an image, two textboxes and a link. The elements in the <code>div.box</code> are filled dynamically so it could be multiple lines of text or a bigger or smaller image. Anyway, I'm applying a <code>min-height:210px;</code> to this <code>div.box</code>es.</p> <p>210px is the maximum height those elements inside it can have in height. My page layout is actually depending on this value of 210px so it can't be higher.</p> <p>However it can be smaller then this 210px so I want to use jQuery to retrieve the actual height of the element (if there wouldn't be set a min-height)?</p> <p>Is that possible? So right now, if I'm trying to do <code>$("div.box").height()</code> it will always return 210px because that is the height of the element. How can I get the height if this min-height css value wouldn't be set? Do I have to get the height of each child and then add them together?</p> <p>Thank you in advance…</p> <p>edit: That's a bit complicated. I'm using min-height because I have a grid layout where 4 of those div.boxes are side by side. There are multiple rows. If I don't use min-height value and one of the boxes is less than the other boxes, the next row of the boxes will jump out of the grid and align to the hightest div box the row above (the div boxes are floated)</p> <p>The reason why I'm trying to fix this with jQuery is, that I want set always one row's div-box height to the hightest box in this row. Is that somehow understandable?</p> <p>So right now all div-boxes are min-height:210px which means all boxes have the same height. As I said it's a grid of boxes, e.g. 4x4 or so. Now the grid is totally perfect because all boxes have the same height. However imagine the all boxes in the first row have a small image, a one-line text don't fill the 210px of the div-box height. So the gap between the first row of boxes to the second row of boxes doesn't optically look good - there is too much spacing.</p> <p>That's the reason why I want to find out the actual height of one div.box so I can apply the largest value always to a set of four boxes. So all rows would have individual heights …</p> <p>Guess nobody could ever understand that without a sample :)</p> <p>edit edit: or is it actually possible to apply a clear or so to every 4th element of the boxes via css? that would be the solution though</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USmatt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery: get actual height of element (or its children) when css min-height is set?
      1. This table or related slice is empty.
      1. VTDownMod
    1. COIf the `div.box` height cannot be more than `210px`, why are you using `min-height` instead of `max-height`. Or am i missing something!?
      singulars
      1. POjQuery: get actual height of element (or its children) when css min-height is set?
      1. This table or related slice is empty.
    2. COI get it man. Check my update.
      singulars
      1. POjQuery: get actual height of element (or its children) when css min-height is set?
      1. This table or related slice is empty.
    3. COHave a look at me Edited answer. Solution via CSS. Hope it helps.
      singulars
      1. POjQuery: get actual height of element (or its children) when css min-height is set?
      1. USpeduarte
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload