【问题标题】：Html page basic layout using div percentage (HTML 4)使用 div 百分比的 HTML 页面基本布局（HTML 4）
【发布时间】：2016-02-04 02:57:17
【问题描述】：

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

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

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

请，有人可以提供这样的示例 HTML + CSS（HTML 4 而不是 5）。

【问题讨论】：

您可以将找到的模板转换为 % 值
请提供一些骨架，只是 div 块和 css

标签： html css dom layout webpage

【解决方案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;
}

【讨论】：

感谢您的回答，但我需要 HTML 示例
在 HTML 4 中没有办法做到这一点？
我相信这个答案在 HTML4 中很有用，@fheoosghalzr。唯一需要注意的是使用的标签，但您可以将它们替换为
和一些 CSS 以使它们看起来更好。
你仍然可以像 HTML 4 一样使用它

【解决方案2】：

这个很经典，有浮动什么的：

http://codepen.io/denns/pen/LpBXBa

HTML 4

<div class="header">header</div>
<div class="nav">navi</div>
<div class="main">main</div>
<div class="footer">footer</div>

CSS

.header {
  background-color: coral;
  height: 100px;
}

.nav {
  background-color: grey;
  height: 400px;
  width: 25%;
  float: left;
}

.main {
  background-color: hotpink;
  height: 400px;
  width: 75%;
  float: left;
}

.footer {
  clear : both;
  background-color: #0ff;
  height: 100px;
}

但这并不能解决您通常遇到的问题。就像“导航栏应该与内容具有相同的高度”。它不使用额外的 clearfix 变体等等......

我猜 px 的使用范围更广，因为如果您从代理处获得设计，它很可能针对特殊的 px 宽度进行了优化。尤其是内部填充和字体。

【讨论】：