StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackground color and scrolling problems with floating layout with fixed header and fixed footer
primarykey
Id
10821546
data
AcceptedAnswerId
10823056
AnswerCount
1
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2012-05-30T17:47:53.600
FavoriteCount
0
LastActivityDate
2013-04-27T13:23:12.983
LastEditDate
2013-04-27T13:23:12.983
LastEditorUserId
367456
OwnerUserId
1409082
ParentId
0
PostTypeId
1
Score
-5
ViewCount
989
LastEditorDisplayName
text
Body
<p>I'm trying to create the layout displayed below, <strong>without using tables or Javascript</strong>: </p> <ul> <li>a fixed header on top of the page (fixed height)</li> <li>a menu on the left (fixed width)</li> <li>the content on the right</li> <li>a fixed footer at the bottom (fixed height)</li> </ul> <pre> ______________________________________ | FIXED HEADER ON TOP | |____________________________________| -------------------------------------- | | | | MENU | | | | | | | | | | CONTENT | | | | | | | | | | | | | | | | |______|_____________________________| ______________________________________ | FIXED FOOTER AT BOTTOM | |____________________________________| </pre> <pre><code><!DOCTYPE html> <html> <head> <title>CSS test</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="header"> HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER </div> <div id="container"> <div id="menu"> <br>START OF MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> MENU MENU MENU<br> END OF MENU<br> </div> <div id="content"> <div id="banner">BANNER<br><hr></div> START OF CONTENT lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem <a id="anchor1" href="#anchor2">go to anchor2</a> ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <a id="anchor2" href="#anchor3">go to anchor3</a> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <a id="anchor3" href="#anchor1">go to anchor1</a> lorem ipsum lorem ipsum lorem ipsum END OF CONTENT </div> </div> <div id="footer"> FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER </div> </body> </html> </code></pre> <p>Here is the source code for "style.css": </p> <pre><code>#header { position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; text-align: center; padding-top: 5px; padding-bottom: 5px; z-index: 2; border: 1px solid black; background-color: #F0F0FF; } #container { border-width: 5px; border-style: solid; border-color: blue; margin-top: 50px; border-radius: 3em; } #menu { width: 140px; height: 100%; border: 3px green solid; background: #EEE; float: left; position: relative; } #banner { text-align: center; } #content { position: relative; padding: 10px 20px; border: 3px red solid; margin-left: 150px; overflow: hidden; background: #EADADA; } #footer { position: fixed; bottom: 0px; overflow: hidden; padding-left: 0px; margin-left: -7px; margin-right: -7px; margin-top: 20px; text-align: center; font-size: 8pt; background: #FEF; border-top-style: solid; border-top-color: black; border-top-width: 1px; width: 100%; } </code></pre> <p>The content length will vary from page to page, the vertical scrollbar on the right should activate if necessary. The menu and the content must scroll together (whenever scrollbar is visible).<br> The menu and content are enclosed by a single border.<br> The menu has a background that should cover the entire height: if the content height is greater than the menu height, the menu area should vertically expand, so that it is colored with the defined background color. </p> <p>I am trying to solve 2 problems:</p> <ol> <li>when I click an anchor on the page (click "go to anchor1"), the anchor appears below the fixed header. It is necessary to scroll down a bit to make the text appear. How do you avoid that? </li> <li>I would like the entire height of the menu area to be completely painted with the background color defined in #menu, not just the part where there is some text. Do you know how to achieve that?</li> </ol> <p>In reply to the comment by @VLTII: </p> <p>Regarding your link: </p> <ul> <li>method B: it solves my first problem, but I don't like the required "display: block" that makes my content ugly. I tried with "display: inline-block" but it doesn't work anymore. </li> <li>methods C, D and E: they all solve my first problem. </li> </ul> <p>I tested all methods with Firefox, Chrome and Opera.<br> With Firefox, when I click a link in the content, it draws a gray frame that goes well above the top of the link. There's no gray frame around links in Chrome or Opera. But this is a really tiny cosmetic problem, I can live with that.<br> In method E, I changed "<code>padding: 15px</code>" to "<code>padding-top: 15px</code>".</p>
Tags
<html><css><css-float>
Title
Background color and scrolling problems with floating layout with fixed header and fixed footer
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. UShakre
UserOwnerUserId
1. USJocelyn
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. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POBackground color and scrolling problems with floating layout with fixed header and fixed footer
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
2. VO
  singulars
  PostPostId
  POBackground color and scrolling problems with floating layout with fixed header and fixed footer
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
3. VO
  singulars
  PostPostId
  POBackground color and scrolling problems with floating layout with fixed header and fixed footer
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTModeratorReview
CommentsPostId

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.