0

我正在寻找一种方法来创建一个具有相对大小的 div，并根据浏览器的高度进行调整。问题是我真的不知道从哪里开始，或者如何去做。

基本上我会有一个 50px 高的标题，以及下面的相对 div。在该 div 下方，还有另一个 div 必须在屏幕内为 50px（不滚动）。该 div 或另一个 div 的更多内容（我不介意哪个）将在屏幕之外。

因此，如果浏览器的高度为 1000px，则顶部和底部 div 将花费 100px。这意味着相对 div 的高度必须为 900px。

为了支持这个想法，我制作了一个我愿意实现的简单图像：（是的，绘画技巧，在我目前的位置没有 Photoshop）

演示

橙色边框代表整个页面的大小。

我知道使用 JavaScript 很容易做到这一点，这对我来说不会是一个挑战，但如果可能的话，我正在尝试找到一个纯 CSS 的解决方案。有任何想法吗？

4

4 回答 4

0

好的！这是我使用过的一种技术——如果你不固定相对定位的 div 的高度，这将最有效。根据您的描述，这不是意图，因此应该可以正常工作。

基本标记：

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS：

body, html{
    width:100%;
    height:100%;
}

body{
    margin:0;
    positino:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/

向主要内容 div 添加填充将确保页面顶部和底部的实际内容不会隐藏在页眉和页脚 div 后面。

于 2013-10-17T15:39:43.987 回答
0

这是我的方法：

header, footer {
    background: #f00;
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

#content {
    margin: 50px 0;
}

看我的小提琴： http: //jsfiddle.net/Vw97D/1/
它符合您的期望吗？

于 2013-10-18T08:18:05.173 回答
0

一个想法，使用 % 而不是 px 作为页眉和页脚：这里

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

和 CSS body { height:100%; } #header { 宽度：100%; 高度：15%；位置：绝对；顶部：0；背景：红色；边距：0；}

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}
于 2013-10-17T15:32:03.533 回答
0

所以我认为这就是你想要的

<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>

然后是一些 CSS

#scrn {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#top {
 height: 50px;
 width: 100%;
 position: fixed:
 top: 0px;
 }
#bottom{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

我觉得这看起来对吗？我还把 position: relative 和 height 放进去，因为我不是 100% 确定你想用它来实现什么。

于 2013-10-17T15:32:12.257 回答