Question

问题是微不足道的（我确信必须有很多解决方案，但我自己找不到合适的解决方案（老实说））

我需要简单的header-＆gt; content-＆gt;页脚页面，就像这样

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

页眉页脚粘贴到底部（不是固定位置，如果底部没有内容，如果有，则必须根据内容块高度移动。

我尝试了什么

页眉和页脚是绝对的顶部和底部属性，内容从顶部和底部填充与页眉和页脚高度相同，但它不能按我的意愿工作。

Jsfiddle示例： https://jsfiddle.net/xwjhn7ej/

Answer 1

你太近了......只需要更改min-height的值，你需要的是设置.container { min-height: 100%;：

padding

Updated Fiddle

<强>加成：

要保持内容全部可见，您可以使用容器上的.container { min-height: 100%; background:red; width:1280px; margin:0 auto; position: relative; /*Use box-sizing to include the values of the padding on the 100% min-height*/ box-sizing:border-box; /*Padding for bottom and top = to the height of your elements footer-header*/ padding: 135px 0; } =页脚和标题的高度：

import flask
from flask import Flask
from flask_sockets import Sockets

app = Flask(__name__)
sockets = Sockets(app)

ws_conns = []


@sockets.route('/echo')
def echo_socket(ws):
    #on connect
    ws_conns.append(ws)

    #while connected
    while True:
        # message = ws.receive()
        # if message is None:
        # #socket has closed/errored
        #     break
        for c in ws_conns:
            c.send('hello and goodbye!')

    #disconnected
    ws_conns.remove(ws)
    ws.close()

2nd Demo Fiddle

Answer 2

根据您的小提琴，您可以尝试以下方法：

.container {
    /* height: 100%; - remove this*/
    min-height: 100vh;

   ...
}

然后根据页眉和页脚的高度在内容的顶部和底部添加适当的填充。

Answer 3

.container {
  min-height: 100%;
}
.content {
  padding-top: 135px; // height of the header
  padding-bottom: 135px; // height of the footer
}

全高内容块宽粘粘页脚

3 个答案:

JSFiddle