css - 使用 div 百分比的 HTML 页面基本布局(HTML 4)

Question

我是网页设计的新手。我有一个规则，就是一切都应该是灵活的。我不明白为什么 px 在网页设计中被广泛使用而不是百分比，也许我错了。
很长一段时间以来，我一直在寻找如下图所示的基本 html 布局，但只找到使用了一些神奇的负边距/填充和 PX 的示例
我想创建这样的布局，但使用没有任何 px 属性的百分比。

我不确定我是否正确，但我讨厌一切紧紧依赖的东西。所有的例子对我来说似乎都不灵活，当然我可以使用媒体查询，但我需要使用百分比或任何对屏幕尺寸不严格的东西来获得这样的结果。

https://cdn.tutsplus.com/net/uploads/legacy/543_html5/2_Column_Layout.png

拜托，有人可以提供这样的示例 HTML + CSS(HTML 4 不是 5)。

Answer 1

试试这个并根据需要更改/编辑

HTML 5

<header>HEADER</header>
<nav>NAV</nav><main>MAIN</main>
<footer>FOOTER</footer>

CSS

header {
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    background-color: teal;
}
nav {
    width: 20%;
    height: 80%;
    background-color: olive;
    display: inline-block;
    box-sizing: border-box;
}
main {
    width: 80%;
    height: 80%;
    background-color: yellow;
    display: inline-block;
    box-sizing: border-box;
}
footer {
    width: 100%;
    height: 10%;
    background-color: orange;
    box-sizing: border-box;
}