如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间？

时间：2008-09-11 16:59:30

标签： html css

假设我有父母DIV。在里面，有三个子DIV：标题，内容和页脚。标题附加到父级的顶部并水平填充。页脚连接到父级的底部并且也水平填充。内容应该填充页眉和页脚之间的所有空间。

父母必须有固定的宽度和高度。内容DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时， 内容DIV应显示滚动条并允许适当滚动 ，以便页脚内容不应被遮挡，也不应页脚含糊不清的内容。

现在出现了困难的部分： 您事先不知道页眉或页脚的高度 （例如，页眉和页脚是动态填充的）。内容如何定位 而不使用JavaScript ？

示例：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
    <div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;">
    header 
    </div>
    <div style="background-color: #8080ff; overflow : auto; position : absolute;">
    content (how to position it?)
    </div>
    <div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
    footer 
    </div>    
</div>

进一步澄清此事件 - 我正在尝试实现的目标布局将用于业务Web应用程序。 父DIV将具有固定但未知的大小 （例如，它将完全是浏览器视口的大小，自定义大小以及通过大小调整浏览器窗口的大小用户）。让我们将父DIV称为“屏幕”。

标题将包含一组过滤控件（如文本框，下拉列表和“过滤器”按钮），如果没有足够的水平空间，它应该换行到下一行（因此它的高度可以随时改变以适应行断）。 标题应始终可见并附加到“屏幕”的顶部 。

页脚将包含一组按钮，就像在对话框窗口中一样。如果水平空间不足，这些也可以换行到下一行。 页脚必须连接到“屏幕”的底部 ，以便随时可访问和显示。

内容将包含“屏幕”内容，如对话框字段等。如果字段太少，其余内容将为“空白”（在这种情况下，页脚不应在内容后立即开始，但仍然附在固定尺寸的“屏幕”的底部。如果字段太多， 内容DIV将提供滚动条 以访问隐藏控件（在这种情况下，内容DIV不得在页脚下方扩展，因为滚动条会被部分隐藏）。

我希望这可以进一步澄清这个问题，因为我的代表太低而无法在你的回复中输入评论。

7 个答案:

答案 0 :(得分：4)

我会为此得到降级，但这听起来像是一张桌子的工作。

您要做的是将三个连续div的总高度设置为一个单位，而高度为100％的1x3表实际上是一个更清洁的解决方案。

答案 1 :(得分：1)

如果您可以不使主要内容滚动，您可能最好使用footerStickAlt方法确保您的页脚停留在屏幕底部或内容的底部（如果内容延伸到屏幕底部。）

答案 2 :(得分：1)

纯CSS解决方案1 ​​ - Flexbox：

您可以使用CSS3 display: flex;属性（see W3 Specs）

创建一个以这种方式运行的div列

使用包装器，您可以使用flex-direction: column;声明对齐列中的所有内容，然后使用justify content: space-between;和height: 100vh;填充垂直空间。然后，您需要做的就是使用flex: 1 0 0;展开您的内容元素，并为其添加一个overflow-y: auto;的滚动条。

有关浏览器支持的说明 - 虽然大多数现代浏览器都支持flexbox，但仍存在一些限制（请参阅：http://caniuse.com/#feat=flexbox）。我建议使用-webkit-和-ms-前缀。

工作示例：请参阅以下代码段和此jsfiddle。

body {
    display: -webkit-flex; /* Safari 6.1+ */
    display: -ms-flex; /* IE 10 */ 
    display: flex;
    -webkit-flex-direction: column; /* Safari 6.1+ */
    -ms-flex-direction: column; /* IE 10 */
    flex-direction: column;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    -ms-justify-content: space-between; /* IE 10 */
    justify-content: space-between; /* Header top, footer bottom */
    height: 100vh;  /* Fill viewport height */
}
main {
    -webkit-flex: 1 0 0; /* Safari 6.1+ */
    -ms-flex: 1 0 0; /* IE 10 */
    flex: 1 0 0; /* Grow to fill space */
    overflow-y: auto; /* Add scrollbar */
    height: 100%; /* Needed to fill space in IE */
}
header, footer {
    -webkit-flex: 0 0 auto; /* Safari 6.1+ */
    -ms-flex: 0 0 auto; /* IE 10 */
    flex: 0 0 auto;
}



/* Make it look a little nicer */
body {
    margin: 0;
    background-color: #8080ff;
}
header {
    background-color: #80ff80; 
}
footer {
    background-color: #ff8080;
}
p {
    margin: 1.25rem;
}
<body>
    <header>
        <p>header</p> 
    </header>
    <main>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.</p>
                            <p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
                            <p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
        </article>
    </main>
    <footer>
        <p>footer</p> 
    </footer>
</body>

有关如何使用flexbox的详细信息，请参阅以下指南：

纯CSS解决方案2 - 显示表[旧解决方案]：

这也可以通过使用CSS display: table;属性（see W3 Specs）来完成。

HTML： 

<div id="screen">
    <div id="header"></div>
    <div id="content">
        <div id="content_frame">
            <div id="content_wrap"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS： 

html, body, #screen, #content, #content_frame {
    height: 100%; /* Make #screen viewport height and #content fill space */
}
#screen {
    display: table;
}
#header, #content, #footer {
    display: table-row;
}
#content_frame {
    overflow-y: auto; /* Add scrollbar */
    position: relative;
}
#content_wrap {
    position: absolute; /* Fix problem with overflow in FF */
}

溢出属性在css表元素及其子元素上是不可靠的，所以我不得不嵌套内容。在这种情况下，我被迫嵌套两次并使用position: absolute;以使其在Firefox中工作。也许其他人可以提出一个更优雅的解决方案，以避免这种'divitis'。

这是一个正常运作的 jsfiddle 。

警告： 这似乎不适用于Opera 12！内容div占用父级高度的100％，导致行溢出表（就像在firefox中一样）。

答案 3 :(得分：0)

绝对的定位让你烦恼不已。尝试这样的事情：

HTML：

<div id="wrapper">
 <div id="header">
  header
 </div>
 <div id="content">
  content
 </div>
 <div id="footer">
  footer
 </div>
</div>

CSS：

#wrapper {
  width: 200px;
  height: 200px;
  overflow: visible;
  background: #e0e0ff;
}
#header {
  background: #80ff80;
}
#content {
  background: #8080ff;
}
#footer {
  background: #ff8080;
}

编辑：也许我误解了，你是否希望所有东西都适合200x200px的盒子，或者你是否希望盒子增加其高度以适合内容？

答案 4 :(得分：0)

父母是否需要保持固定的高度？

<div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80;">
header 
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
</div>
<div style="float: left; clear: left; background-color: #ff8080;">
footer 
<BR />taller
</div>

如果父母的身高是固定的，那么这就是我最接近它的方法 - 如果那些颜色块（而不仅仅是文本）真的很重要而且不是只是为了说明DIV的界限：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>

答案 5 :(得分：0)

您是否需要更改中心div？如果您只是想确保它的背景（＃8080ff）出现在页眉和页脚之间，为什么不将包含div的背景设置为＃8080ff。

表示页眉和页脚背景会覆盖它，div的背景其余部分也是正确的。

答案 6 :(得分：0)

这可以通过使用不同的技术来解决。第一个是使用媒体查询。使用它们，您可以定义每种屏幕尺寸的页面外观。其次，有几种技术可以正确定位页脚（粘性页脚）。第三，您可以使用不同的表格样式或flexbox方法来正确定位内容。

相关问题
最新问题