2

我一直困惑于如何为使用固定页眉和页脚、可滚动内容区域的模式显示创建 DIV，并且仅依赖于持有者和内容主体的宽度/高度的百分比值。免责声明：我对 CSS 了解不多。

这是我想要的：

  • DIV 宽度为 65%，高度为 60%，页面居中
    • 页眉：100px 高，固定位置
    • 内容：DIV 中剩余的所有内容，固定位置，可滚动内容
    • 页脚：100px 高，固定位置

编辑：JSFiddle

这是我的尝试：

html, mbody {
    overflow:auto;
}

#mholder{
    padding: 10px 10px 10px 10px;
    width:  65%;
    height: 60%;
    background-color: white;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
}

#mheader{
    position: fixed;
    height: 100px;
    left:0;
    top:0;
    width: 100%;
}

#mbody{
    width:100%;
}

#mfooter{
    height:100px;
    width:100%;
    position: fixed;
    left: 0;
    bottom: 0; 
}

这是我在页面上的内容：

<div id="mholder">
    <div id="mheader">Header text</div>
    <div id="mbody">Long body text...</div>
    <div id="mfooter">Footer text</div>
</div>

发生的事情是标题出现在我页面的左上角，而不是模式显示；右下角的页脚也是如此；模态区域（应该由白色背景标识）绝对不是页面的 65%/60%，并且mbodyhtml 有点mholder随意地与 div 重叠。

编辑：JSFiddle

4

1 回答 1

1

我认为你需要一个

position : absolute;

而不是fixed你的页眉和页脚。固定是相对于屏幕的，而绝对和相对实际上取决于具有非静态位置的最后一层。

小提琴将不胜感激。

编辑：那个小提琴看起来更像你的预期吗？所以它似乎position: absolute适合您对页眉和页脚位置的需求。

所以你只需要对身体做同样的事情来完美地定位它。但是你面临一个新的问题。您希望页眉和页脚具有固定大小，但希望正文填充“其余部分”。我想不出一个解决方案来做到这一点，除非给页眉和页脚一个百分比的高度。这就是我在小提琴中所做的。所以这是我能找到的最好的。

所有三个元素都是absolutely 定位的，header 用 a 定位top: 0;，body 用top: 10%;指令定位，页脚用 a定位bottom: 0;。

于 2013-06-23T03:46:08.523 回答