代码之家  ›  专栏  ›  技术社区  ›  Luca Rood

Html页面的doctype越来越奇怪

  •  0
  • Luca Rood  · 技术社区  · 13 年前

    我写了一个html页面,在一个单独的文件中有一些css,效果很好。然后我意识到我应该在我的html中添加一个doctype声明。我这样做了,我的页面完全乱了!我尝试了所有类型的声明,但最终都是一样的!!!

    这是我的html(目前仅适用于Chrome,没有doctype):

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" type="text/css" href="style.css">
            <title>Luca Rood - Home</title>
        </head>
        <body background="images\background.jpg">
            <div id="header">
                <div id="header-back"></div>
                <div id="top-spacing"></div>
                <div id="content">
                    <a href="index.html" title="Luca Rood - Home">
                        <img id="image" src="images\logo.png" alt="Luca Rood">
                    </a>
                </div>
            </div>
        </body>
    </html>
    

    这是我的css:

    body {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        margin: 0px 0px 0px 0px;
        }
    
    #header {
        position: relative;
        height: 15%;
        }
    
    #header-back {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 0.3;
        z-index:1;
        }
    
    #top-spacing {
        height: 20%;
        width: 100%;
        }
    
    #content {
        position: relative;
        width: 80%;
        height: 60%;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        z-index:2;
        }
    
    #image {
        height: 100%;
        }
    

    请帮忙。

    提前感谢,

    卢卡

    2 回复  |  直到 13 年前
        1
  •  1
  •   markasoftware    13 年前

    你遇到了典型的百分比身高问题。要修复它,您必须添加 height:100% 到 body 样式并在上添加样式 html 具有的元素 高度:100% 也:

    <style>
        body{
            /*...*/
            height:100%;
        }
        html{
            height:100%;
        }
    </style>
    

    希望它能起作用!

        2
  •  -1
  •   RonEskinder    13 年前

    试试上面的<html>标签

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">