如何将div从底部移动到顶部

Question

I have a variable height , 100%-width sub-menu which is normally positioned at the bottom of the page. I want it to be at the top of the page when viewed through a browser with a small window. The following is the structure of the HTML for the page:

<div id=container style='height: 500px; background: red;'>
 <div id=content style='width: 100%; background: green;'>content</div>
 <div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div>
</div>

How can I get the variable height sub-menu to the top without blocking the content of the page using CSS?

Answer 1

You can use display: table-header-group; ...

HTML:

<div id=container>
    <div id=content>content</div>
    <div id=sub-menu>sub-menu</div>
</div>

CSS:

#container {
  display: table; 
  width: 100%;
}

@media (min-width: 500px) {
  #sub-menu {
    display: table-header-group;
  }
}

Demo: http://jsbin.com/lifuhavuki/1/edit?html,css,output

Answer 2

If you know the height of your sub-menu , then you can do it using position: relative on #container and position: absolute on both your #content and #sub-menu . You'll also have to give the #container a top value that's equal to the height of your #sub-menu .

Answer 3

Im not sure how you have your media queries set out. This might not be possible with your html structure so you may have to edit this for it to work.

#sub-menu
{
  position:fixed;
  top:0;
  width:100%;
  background-color:#f00;
}

The code above will need to be placed inside your media query for small screens.

Answer 4

Here's the css media query solution.

/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
position:absolute;
top:0px;
height:auto; /* So that the content wont be lost with the reduction in width. */
}

With little more explanation of how u've placed the div or by linking it up with a fiddle would be helpful.