1

我正在尝试在行设计中制作 3 个 div。页眉和页脚具有固定高度的位置。中心 div 扩展以填充空白空间。我已经尝试过，但我得到的最接近的是下面的代码。在页脚 div 上扩展的中心 div 仍然存在问题。

html:

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

CSS：

#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

在此处输入图像描述

4

10 回答 10

2

三行纯 CSS

我知道这篇文章有点进展，但尽管有相反的说法，你可以用 CSS 非常简单地做到这一点。不需要 JavaScript、jQuery、CSS 3 hacks 等。

这是几个显示固定页眉和页脚以及动态主体 div 的 jsf。

第一个显示固定像素高度的页眉和页脚以及动态主体，完全符合您在图像中的需要

http://jsfiddle.net/LBQ7K/

<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>

html, body, {
height: 100%;
}

.header {
position:   absolute;
top:    0px;
height:     50px;
width:      100%;
background: #f00;
}

.footer {
position:   absolute;
bottom: 0;
height:     50px;
width:      100%;
background: #00f;
}

.cssBody {
position:   absolute;
top:    50px;
bottom: 50px;
width:  100%;
background: #0f0;
}

第二个显示您可以使用相同的技术来拥有动态页眉和页脚。 http://jsfiddle.net/reqXJ/

    <body>
    <div class="header"><p>Header</p></div>
    <div class="cssBody"><p>Hello World</p></div>
    <div class="footer"><p>Footer</p></div>
</body>

html, body, {
    height: 100%;
}

.header {
    position:   absolute;
    top:        0px;
    height:     15%;
    width:      100%;
    background: #f00;
}

.footer {
    position:   absolute;
    bottom:     0;
    height:     15%;
    width:      100%;
    background: #00f;
}

.cssBody {
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      100%;
    background: #0f0;
}
于 2013-04-06T12:10:56.743 回答
1

这是一个非常常见的问题，对我有用的解决方案之一来自以下网站：

http://ryanfait.com/sticky-footer/

使用代码：

http://ryanfait.com/sticky-footer/layout.css

和另一个流行的选择：

http://www.cssstickyfooter.com/

如果这不能满足您的需求，请告诉我们，我们可以提供更多帮助。

于 2012-11-23T07:51:53.833 回答
1

好像你正在尝试做一个粘性页脚，嗯......你需要一些技巧：

HTML：

<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

CSS

.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

注意：将页脚和推送高度替换为您的固定高度，并且不要忘记在容器中的行之后插入推送 div。

于 2012-11-23T08:16:57.680 回答
0

您可以通过绝对定位行并在中间行的顶部和底部添加填充来伪造这一点。你不能像处理桌子那样做

#container { position:relative; height:800px } // needs height

#rowOne, #rowTwo, #rowThree { position:absolute }

#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }

#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
于 2012-11-23T07:52:48.170 回答
0

这行代码有帮助吗？ 演示

试试这个：

#container{
   ...
   position:relative;
}
#content{
   min-height: xxx;
}
于 2012-11-23T08:02:06.050 回答
0

这应该完全符合您的要求：

html代码：

<div id="header">
    header
</div>
<div id='container'>
    <div id='rowOne'>one</div>
    <div id='rowTwo'>two</div>
    <div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
    footer
</div>

CSS 代码：

.clearfix {
    clear: both;
}
#header, #footer {
    background-color: red;
}
#container {
    width: 100%;
}
#rowOne {
    width: 25%;
    background: green;
    float: left;
} 
#rowTwo {
    width: 55%;
    height: 100px;
    background: limegreen;
    float: left;
}
#rowThree {
    width: 20%;
    background: green;
    float: left;
}​

您也可以在jsFiddle上进行测试

于 2012-11-23T08:12:43.943 回答
0

您是否尝试过查看 CSS 框架？它们带有默认类，您可以使用它们在短短几分钟内设置类似的东西。它们还有助于生成更简洁的 html 和界面，您可以在以后轻松地重新设计它们。

http://twitter.github.com/bootstrap/index.html

于 2012-11-23T09:06:59.013 回答
0

我希望你看起来像这样：-演示

CSS

#container {
    height: 100%;
}

#rowOne {
    height: 50px;
    background: green;
    position:fixed;
    left:0;
    right:0;
}
#rowTwo {
    background: limegreen;
    min-height:500px;
    position:absolute;
    left:0;
    right:0;
    top:50px;
}
#rowThree {
    position: fixed;
    background: green;
    bottom:0;
    left:0;
    right:0;
    height:50px;
}

HTML

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>
于 2012-11-23T09:45:06.557 回答
0

一种方法是使用 Jquery 将中间 div 的最小高度设置为屏幕的高度，减去其他两个 div 的高度（100px），这样应该可以：

$(document).ready(function() {

    var screenHeight = $(document).height() - 100px;

    $('#rowTwo').css('min-height' , screenHeight);

});
于 2012-11-23T09:59:45.987 回答
0

针对您对 jedrus07 回答的评论：

所有这些解决方案都会扩展页脚 div 后面的中心 div。我想要一个解决方案，每个 div 只有他自己的空间。

唯一的方法是使用 CSS 3 calc()。如果您不需要支持很多浏览器，这是一个选项，下面是它的演示：

http://jsfiddle.net/5QGgZ/3/

（使用 Chrome 或 Safari。）

HTML：

<html>
  <body>
    <div id='container'>
      <div id='rowOne'>row 1</div>
      <div id='rowTwo'>row 2</div>
      <div id='rowThree'>row 3</div>
    </div>
  </body>
</html>

CSS：

html, body, #container {
  height: 100%;
}
#rowOne {
  height: 50px;
  background: #f00;
}
#rowTwo {
  height: -webkit-calc(100% - 100px);
  background: #0f0;
}
#rowThree {
  height: 50px;
  background: #00f;
}

如果您想要更广泛的浏览器支持，您将不得不使用像 jedrus07 提到的那样的粘性页脚解决方案，或者 Tom Sarduy 的回答。

于 2012-11-29T02:47:07.227 回答