Question

我正在寻找一种方法来创建一个相对大小的div，调整到浏览器的高度。问题是我真的不知道从哪里开始，或者怎么做。

基本上我会有一个标题，它将是50px高度，以及那里的相对div。在那个div下面，另一个div在屏幕内是50px（没有滚动）。更多内容的div，或另一个div（我不介意哪一个）将在屏幕之外。

因此，如果浏览器是1000px高，那么100px将用于顶部和底部div。这意味着相对div必须是900px高。

为了支持这个想法，我简单地描绘了我愿意实现的目标:(是的，绘画技巧，在我当前的位置没有Photoshop）

Demo

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

我知道这对JavaScript来说很容易，这对我来说不是一个挑战，但我试图找到一个只有CSS的解决方案。有什么想法吗？

Answer 1

一个想法，使用％而不是px作为页眉和页脚：here

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

和CSS 身体 { 高度：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%;
}

Answer 2

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

<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;
 }

我觉得这看起来不错？另外我把位置：相对和高度放在一起因为我不是100％确定你想用它实现的目标。

Answer 3

确定！这是我使用过的一种技术 - 如果你不修复相对定位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之后。

Answer 4

这是我的方法：

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/
它符合你的期望吗？

在绝对大小的内容之间创建具有相对大小的div

4 个答案: