StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
2080830
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2010-01-17T11:39:50.900
FavoriteCount
0
LastActivityDate
2010-01-17T11:39:50.900
LastEditDate
LastEditorUserId
0
OwnerUserId
252065
ParentId
2079295
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p><code>height: 100%;</code> is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the <code>#sidebar</code> and <code>#rightcontent</code> columns only have only the height of about an <code>em</code> — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but <code>#wrap</code> also has a %-based height, which causes this to fail (at least in my Firefox).</p> <p>Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of <code>#wrap</code> as 100% of <em>it's</em> parent, which is <code><body></code>. So naturally, when your columns are sized to the height of <code><body></code>, which also encloses the height of your header and footer, the columns are too tall.</p> <p>A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a <code>position: fixed; bottom: 0px;</code> <code><div></code> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.</p> <p>Here's what I did to your page to get this effect:</p> <pre><code> <div id='columnfooter'> <div id='sidecont'></div> <div id='rightcont'></div> </div> </code></pre> <p><br/></p> <pre><code>/* And modify your CSS like this */ #sidebar, div#sidecont { width: 30%; background: #ebebeb; float: left; } #rightcontent, div#rightcont { width: 70%; background: #fff; float: right; } div#rightcont, div#sidecont { height:100%; } #footer { width: 100%; background: #414141; height: 40px; position: relative; bottom: 0px; } div#columnfooter { position: fixed; z-index: -25; bottom: 40px; height: 100%; background: #ebebeb; width: 100%; } </code></pre> <p>Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, <code>#footer</code> at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).</p> <p>Hope this helps!</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCSS Fluid Layout?
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USImpirator
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POCSS Fluid Layout?
  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
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COHey, nice fix! Although i didn't use it in the end as i used javascript to keep this, and a few other things in perspective as the user resizes the window and so on... i know this can cause issues with non-js browsers but the rest of the web application is very JS heavy so i have non-js browser issues in place alreay :-)
  singulars
  PostPostId
  PO
  UserUserId
  UStarnfeld

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.