Question

以下是我的HTML正文中的代码：

<div id="mtx_bckgd">
    <p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
    <div id="uwlogo">
        <img src="uwlogo.png" height="50px">
    </div>
    <div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  
</div>
<div class="outerdiv" id="navbar">
    <a href="runningCalculator.html"><input type="button" class="navbutton" value="Running Calculator"/></a>
    <input type="button" class="navbutton"/>
    <input type="button" class="navbutton"/>
</div>
<div class="outerdiv" id="footer">
    <p>Last modified: March 21st, 2014</p>
</div>

这是相关的CSS：

#mtx_bckgd
{
    font-family: "Courier New";
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;

    z-index: -1;
    background: linear-gradient(180deg, #39275b, #FFF);
}

#headerbox
{
    width: 80%;
    height: 50px;
}

#navbar
{
    width: 80%;
    height: 30px;
}

#footer
{   
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 80%;
}

标题框和导航栏应该在各自的订单中位于顶部。页脚应该在底部对齐。这是怎么回事让我的页脚 ABOVE 另外两个，并且一切都在底部对齐？

Answer 1

删除：

height: 100%;

来自#mtx_bckgd元素的

此外，与问题无关，但更改

<img src="uwlogo.png" height="50px">

到

<img src="uwlogo.png" height="50px" />

由于您的图片代码未关闭

Answer 2

mtx_bckgd占据100％宽度和100％高度（所以你的屏幕都是如此）。页脚在底部是绝对的，因此它位于mtx_bckgd和屏幕底部。最后，另外两个div标签位于底部，因为mtx_bckgd占据了所有屏幕，它们必须在它之后。

您想要实现哪种布局？

我的div是不正常的，并在页面底部对齐？

2 个答案: