StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18165709
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-08-10T19:45:43.827
FavoriteCount
0
LastActivityDate
2013-08-10T19:45:43.827
LastEditDate
LastEditorUserId
0
OwnerUserId
1387174
ParentId
18165106
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
<p>Well, the reason why <code>#div2</code> extends below <code>#div1</code> is because in addition to being 100% the height of its parent, <code>#div2</code> is also pushed down by the four lines of text above it - so it extends exactly that distance outside of <code>#div1</code>. </p> <p>How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:</p> <pre><code><div id="div1">Test <br/>Test <br/>Test <br/>Test <div id="div3"> <div id="div2">Test</div> </div> </div> </code></pre> <p>To clarify my changes, I added the <code>#div3</code> element around <code>#div2</code>. Now, for my CSS, I just added this definition for <code>#div3</code>, and modified the <code>body</code> CSS to:</p> <pre><code>body { margin: 0; line-height:1.3em; } #div3 { position:absolute; top:5.2em; bottom:0; left:0; width:100%; } </code></pre> <p>This approach requires that you know how far from the top of <code>#div1</code> you want <code>#div3</code> (and its child <code>#div2</code>) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <code><body></code>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the <code>top</code> attribute.</p> <p>Here's a <a href="http://jsfiddle.net/JZnba/" rel="nofollow">JSFiddle</a> to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PODiv with percentage height doesn't fit in
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USSerlite
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. PODiv with percentage height doesn't fit in
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
CommentsPostId
1. COThanks u a lot, you are my hero! :D
  singulars
  PostPostId
  PO
  UserUserId
  USuser2670840
2. COGreat! I'm glad I could help you out.
  singulars
  PostPostId
  PO
  UserUserId
  USSerlite

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.