Html 如何将div从下移到上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10764912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move div from bottom to top
提问by Question Overflow
I have a variable height, 100%-widthsub-menuwhich 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 smallwindow. The following is the structure of the HTML for the page:
我有一个可变的 height，100%-widthsub-menu它通常位于页面的底部。当通过带有小窗口的浏览器查看时，我希望它位于页面顶部。以下是页面的 HTML 结构：
<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-menuto the top without blocking the content of the page using CSS?
如何sub-menu在不使用 CSS 阻止页面内容的情况下将可变高度设置到顶部？
采纳答案by Ana
If you know the height of your sub-menu, then you can do it using position: relativeon #containerand position: absoluteon both your #contentand #sub-menu. You'll also have to give the #containera top value that's equal to the heightof your #sub-menu.
如果您知道子菜单的高度，那么您可以使用position: relativeon#container和position: absoluteon#content和#sub-menu. 你还必须给出#container一个等于你的#sub-menu.
回答by jjenzz
You can use display: table-header-group;...
您可以使用display: table-header-group;...
HTML:
HTML：
<div id=container>
<div id=content>content</div>
<div id=sub-menu>sub-menu</div>
</div>
CSS:
CSS：
#container {
display: table;
width: 100%;
}
@media (min-width: 500px) {
#sub-menu {
display: table-header-group;
}
}
回答by Katti
Here's the css media query solution.
这是css媒体查询解决方案。
/* 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.
对您如何放置 div 或通过将其与小提琴链接进行更多解释会有所帮助。
回答by Undefined
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.
我不确定您如何设置媒体查询。这对于您的 html 结构可能是不可能的，因此您可能必须对其进行编辑才能使其工作。
#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.
上面的代码需要放在小屏幕的媒体查询中。
