0

我正在尝试仅使用 HTML 和 CSS 创建布局，这样我就没有使用 Javascript 进行布局的额外复杂性。

布局如下，由三部分组成：页眉、主要内容和页脚。

样本布局

页眉和页脚应该是相同的高度，并且应该始终可见。在调整大小时，页眉、内容和页脚应相应地扩展/收缩，但有一些例外。首先，当达到主要内容的最大高度时，主要内容不应该再扩大，而是应该扩大页眉和页脚。其次，当主要内容的最小高度被击中时，任何部分都不应再收缩，并且视图应该是可滚动的。

至于主要内容，它可以水平滚动，视口的主滚动条位于屏幕底部，而页眉和页脚应保持在原位。

到目前为止，我已经弄清楚了如何通过填充整个视口的绝对定位容器 div 来实现水平可滚动的主要部分，但我似乎无法弄清楚任何元素的垂直大小。我能想到的唯一方法是挂钩 on resize 事件，我想避免这种情况，因为它感觉很hacky。

4

2 回答 2

0 
<body>
  <div class="header">header</div>
  <div class="content">content



 </div>

 <div class="footer"></div>

和CSS

.header, .content, .footer {
    position: absolute;
}
.header{
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #99CC00;
    left: 0;
    right: 0;
}
.content {
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    background-color: #FF6600;
}
.footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-color: #6600CC;
}

和 dabblet 上的例子

于 2013-03-07T06:45:19.223 回答
0

在你的问题中，我只会使用固定定位的页眉和页脚，然后是一个简单的水平内容 div .. 看看我制作的小提琴

HTML

<div id="header">Header</div>
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content  </div>
<div id="footer">Footer</div>

CSS

*{
    padding:0;
    margin:0;
}
html{
    overflow-y:hidden;
}
#header,#footer {
    width:100%;
    position:fixed;
    height:50px;
    left:0;
    background:#404040;
    z-index:9999;
}
#header{top:0;}
#footer{bottom:0;}
#content{
    position:absolute;
    background:gray;
    top:50px;
    left:0;
    min-width:100%;
    bottom:50px;
    float:left;
    display:block;
    width:5000px; /*your content width but 5000 for testing*/
}

如果您希望页眉和页脚缩放，您可以使用这个小提琴



Css3 方式
您可以使用新的 css3 属性 flex-box：

有关示例，请参见以下链接

关于 flexbox 的更多信息：Tutsplus

Flex-box 正是解决这个问题的方法

但它不会在 IE9 中得到支持......
所有新的浏览器都将拥有它，包括 IE10：
caniuse

于 2013-03-07T08:09:40.417 回答