html - 如何将徽标放在顶部，将页脚放在底部？

无论扩展名如何，我都需要徽标块始终位于页面顶部，而页脚始终位于页面底部。
并且块宽度输入必须在页面中间。
现在我有



我使用样式化的组件

Logo.js

import styled from 'styled-components'


export default styled.div`
    padding-top: 40px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-start;
`

FooterMain.js

import styled from 'styled-components'


export default styled.div`
    width: 440px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
        margin-top: 55px;
        margin-bottom: 25px;

`

最佳答案

您需要设置position:absolute，然后将top:0设置为页眉，并将bottom:0设置为页脚。希望这可以帮助。

#header, #container, #footer {
  position:absolute;
  right:0;
  left:0;
  background: #3980dd
 }

#header{
   height:20px; top:0;
}

#footer{
  height:20px; bottom:0;
}

#container{
  top:20px;
  bottom:20px;
  background: #a03347;
}

<div id="header">Header</div>
<div id="container">This is my container</div>
<div id="footer">Footer</div>