为什么在尝试将高度设为div时相对定位不起作用？

Please, I can't get this code to work. I'm trying to make a header and a footer, both relative-positioned, but it's not working very well. It only works when I change all position values to Absolute, which I've read it's a bad practice, not to mention possible appearance errors. Here's my CSS code:

请,我无法使用此代码。我正试图制作一个页眉和一个页脚,两者都是相对定位的,但它的效果并不好。它只适用于我将所有位置值更改为绝对值,我读过这是一个不好的做法,更不用说可能的外观错误了。这是我的CSS代码:

body{
    margin:0px;
    padding:0px;


}

#div_header {
    background-color:#0000ff;
    width:100%;
    height:20%;
    padding:0px;
    margin:0% 0% 7% 0%;
    position:absolute;
}


#div_footer{
    background-color:#ffff00;
    width:100%;
    height:100%;
    position:relative;
    top:30%;
    margin:0px;
    padding:0px;
    bottom:0px;


}

#col1{
    position:absolute;
    bottom:0px;




}

#col2{
    position:absolute;
    bottom:0px;
    left:12%;

}

#col3{
    position:absolute;
    bottom:0px;
    left:24%;



}

#col4{
    position:absolute;
    bottom:0px;
    left:36%;


}

#div_content{
    background-color:green;
    width:65%;
    height:100%;
    position:relative;
    top:10%;
    left:17%;


}

#div_leftBar{
    background-color:orange;
    width:12%;
    height:60%;
    position:fixed;
    top:20%;



}

#div_rightBar{
    background-color:red;
    width:14%;
    height:60%;
    position:fixed;
    top:10%;
    right:0px;

}

And the HTML code:

和HTML代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Website</title>
        <link rel="stylesheet" href="index.css" type="text/css">



        </style>
    </head>

        <body>

        <div id="div_header">
aaa     
        </div>

        <div id="div_leftBar">
        </div>

        <div id="div_rightBar">
        </div>

        <div id="div_content">
        Lorem ipsum dolor sit amet...
        </div>

        <div id="div_footer">
            <ul id="col1">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col2">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col3">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>

            <ul id="col4">
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
                <a href="">
                    <li>Lorem Ipsum Dolor</li>
                </a>
            </ul>   
        </div>

        </body>
</html>

When run the browser (Google Chrome up-to-date) with the codes above, it shows like this: http://jsfiddle.net/c8RDC/3/

使用上面的代码运行浏览器(Google Chrome是最新的)时,它显示如下:http://jsfiddle.net/c8RDC/3/

I'm really sorry if this is a silly question but I really can't get it to work.

如果这是一个愚蠢的问题,我真的很抱歉,但我真的无法让它发挥作用。

1 个解决方案

#1

Is this more like what you want?

这更像你想要的吗?

http://jsfiddle.net/c8RDC/5/

The container uses:

容器使用:

position: relative

and the things inside of it use

而它里面的东西都在使用

position: absolute;

#1