0

这是我的 HTML 结构

<html>
   <head>
      <style></style>
      <title></title>
   </head>
   <header></header>
   <nav></nav>
   <body></body>
   <footer></footer>
</html>

这就是风格

html{
    height:99%;
    width: 99%;
    position:absolute;} 

header{
    position:absolute;
    top:0%;     left:0%;
    width:100%; height:7%;}

nav{
    position:absolute;
    top:7%;    left:0%;
    width:10%; height:85%;}

body{
    position:absolute;
    top:0%;    left:0%;
    width:90%; height:90%;}

footer{
    position:absolute;
    top:100%;  left:0%;
    height:5%; width:100%;}

我确实有边框和背景颜色来识别页面上的元素，但为简洁起见省略了。

我希望它如下所示，每个元素都相对于 html 标签进行设置（定位）。但是当我定位身体时，所有其他的东西都会随之移动。即使他们不是标签的孩子。

 ------------------------------
|           Header            |
|¯¯¯¯|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|    |                        |
|Nav |                        |
|    |       Body             |
|    |                        |
|____|________________________|
|            Footer           |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
4

1 回答 1

2

该<html>元素只能包含<head>和<body>元素*：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

所有用于表示的元素都属于该<body>元素：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <header>
      <h1>Example</h1>
    </header>
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <footer>
      <address>
        Some location
      </address>
    </footer>
  </body>
</html>

一切都相对于元素移动的原因是，在元素之后立即创建<body>了一个隐式元素<body><head>以包含结构元素。

* 假设 HTML5

于 2012-10-04T05:21:13.923 回答