相关疑难解决方法(0)

我知道这是一个常见问题,我查找了一些解决方案,但找不到我想要的内容.

我想转换此为表布局.

注意:页眉和页脚必须设置为固定高度(以像素为单位)(50px即可).

我遇到的主要问题是我无法在中间获得那个"大盒子",就像它完成表格一样.有一些解决方案适用于可变长度的内容(文本,图像),但我希望这个盒子看起来像一个盒子 - 边框,圆角和所有.

我正在尝试设计一个带有标题的页面,一个延伸到100%垂直横向(减去页眉和页脚)和页脚的主要div.喜欢这张照片:

我可以让标题和主要div工作.像这样:

    <div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

有了这个CSS:

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

所以主div从顶部开始40px以占用标题,然后从底部停止40px以占据页脚.这很好但我不能让页脚div显示在主div下面.它现在的方式是position: relative将页脚放在主div的顶部.如果我使用position:absolute它将它放在主div下面.

我确信我做错了,因为CSS不是我的事.

对此的任何帮助都会很棒.

谢谢