StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20114486
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-11-21T07:02:51.520
FavoriteCount
0
LastActivityDate
2013-12-06T19:13:52.937
LastEditDate
2013-12-06T19:13:52.937
LastEditorUserId
618649
OwnerUserId
618649
ParentId
20085137
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>Here's your solution.</p> <p>After my initial post, I figured why not slap together one of those handy JS Fiddles, so here you go: <strong><a href="http://jsfiddle.net/8uHF6/" rel="nofollow noreferrer">http://jsfiddle.net/8uHF6/</a></strong></p> <p>Forget all that frustrating business of trying to use wrappers and set other elements to 100% height to squeeze the extra vertical space out of the layout, and so on. You just end up in a situation where you poke over here, and something squirts out over there, so you poke over there, and something squirts out somewhere else. Ugh.</p> <p>Use absolute positioning for your main layout elements. Basically, you nail the elements down exactly where you want them by specifying their top and/or bottom values, including your main content element, which will automatically scale to fit the available space as your window changes size vertically.</p> <p>Tell your main content element to use automatic overflow, so the content will appear to slide under the footer, out of sight. A scrollbar will appear automatically if it's needed. Float the main content elements if you want a floated layout inside of them (otherwise, don't bother). You can use a fluid or elastic grid layout inside of something like this, and so on.</p> <p>Also, note that there is no overall "site-wrapper" or "page" div, which is kind of nice since the real goal of the semantic web is that your HTML contains content, and only content (HTML is <em>data</em>, not <em>layout</em>). Adding things like wrappers to your HTML to control layout is unfortunate. If possible, every last bit of layout logic should be in your CSS.</p> <p>Good luck!</p> <p><img src="https://i.stack.imgur.com/ZYaiz.jpg" alt="enter image description here"> </p> <p><img src="https://i.stack.imgur.com/ghlOv.jpg" alt="enter image description here"></p> <pre><code><html> <head> <style> html { height: 100%; min-height: 100%; font-size: 100%; } body { margin: 0; height: 100%; min-height: 100%; } header { background-color: #FF0000; float: left; /* if you want a layout with floated descendants... */ position: absolute; width: 100%; top: 0; overflow: hidden; height: 4.6em; border-bottom: 0.15em solid yellow; } article { background-color: #CCCCCC; float: left; position: absolute; width: 100%; top: 4.75em; bottom: 2.75em; overflow: auto; } footer { background-color: #AACCFF; float: left; position: absolute; width: 100%; height: 2.75em; bottom: 0; border-top: 0.15em solid blue; } </style> </head> <body> <header> Header Stuff... </header> <article> Resize shorter vertically to see what happens when the content overflows.<br/> 1<br/> 2<br/> 3<br/> 4<br/> 5<br/> 6<br/> 7<br/> 8<br/> 9<br/> 10<br/> 11<br/> 12<br/> 13<br/> 14<br/> </article> <footer> Footer stuff... </footer> </body> </html> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMy Footer Floats
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCraig
UserOwnerUserId
1. USCraig
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

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.