Question

以下是3列网页布局模板，包含页眉和页脚div。

主要列是故意在html中首先列出的，以确保从SEO的角度来看，它的内容具有最佳位置。

当前代码有以下两个缺陷：

每个div只有在内容必要时才有效，因此可以看出，如果使用背景颜色，它们的长度不等。
如果页面很短（例如，“谢谢。您的邮件已发送”），则页脚会在页面的一半处结束，我宁愿它出现在视图端口的底部这个例子，左右div被扩展以保持一致性。

我还创建了一个jsfiddle here，但初始代码如下所示。

HTML：

<div class='layout'>
    <div class="header">
        domain.com
    </div>

    <div class="content">
        <div class="wrap">
            <div class="primary">
                Primary Content (centre column)
            </div>
            <div class="left-col">
                Left hand content
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
            </div>
        </div>
        <div class="right-col">
            Right hand content
        </div>
    </div>

    <div class="footer">
        <strong>&copy; All rights reserved</strong>
    </div>
</div>

CSS：

.layout {
    width: 90%;
    margin-left: 5%;
}

.header, .footer {
    border: 1px solid #999;
}

.footer {
    clear: both;
}

.primary {
    background: #FBA95E;
}

.left-col {
    background-color: #B9B9FF;
}

.right-col {
    background-color: #B9B9FF;
}

.header, .footer, .primary, .left-col, .right-col {
    padding: 10px 2%;
    margin: 5px 0;
}

.content {
    padding: 0;
    overflow: hidden;
}

.primary, .left-col, .right-col {
    margin-top: 0;
}

.wrap {
    float: left;
    width: 78%;
}

.primary {
    float: right;
    width: 65%;
    margin-left: 2%;
}

.left-col {
    float: left;
    width: 25%;
    text-align: center;
}

.right-col {
    float: right;
    width: 16.5%;
}

我怎样才能克服上面提到的两个问题？

Answer 1

你可以使用position：absolute;底部：0;为页脚。

Answer 2

现在是2018年，也许可以使用grid布局。

import express from 'express';
import pool from './../helpers/db';
const router = express.Router();

//below api eventually returned this error
router.get('/name', (req, res) => {
 (async () => {
  try {
    const res = await pool.query('SELECT * FROM myuser WHERE id = $1', [1]);
    console.log(res.rows[0]);
  }
  catch(error){
    console.error(error);
  }
})();
});

module.exports = router;

* {
  box-sizing: border-box;
}
html,body {
  min-height:100vh;
  margin:0;
}
.layout {
  display:grid;
  grid-template-columns:16.5% auto 16.5%;
  grid-template-rows:43px auto 43px;
  grid-template-areas:
    "header header header"
    "left primary right"
    "footer footer footer";
  width: 90%;
  margin-left: 5%;
  min-height:100vh;
}

.header, .footer {
	border: 1px solid #999;
}
.header {
  grid-area:header;
}

.footer {
  grid-area:footer;
}

.primary {
  background: #FBA95E;
  grid-area: primary;
}

.left-col {
  background-color: #B9B9FF;
  grid-area: left;
  text-align: center;
}

.right-col {
  background-color: #B9B9FF;
  grid-area: right;
}

.header, .footer, .primary, .left-col, .right-col {
  padding: 10px 2%;
}

.primary, .left-col, .right-col {
  margin: 2% 0;
}

.primary {
  margin-left:2%;
  margin-right:2%;
}

HTML：使所有3列高度相等（自动调整大小）

2 个答案: