2

谁能帮我定位我的内容块？如果有很多内容看起来不错，但当窗口高于内容块时就不行了。实际上，我需要图片上的“内容”块占用所有可用空间（高度），这就是页脚粘在底部的原因。

在此处输入图像描述

我有下一个 HTML 标记：

<div>
    <header></header>
    <nav class="breadcrumbing"></nav>
    <section class="left_nav"></section>
    <section class="content"></section>
    <footer></footer>
</div>

使用这个 CSS：

html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}

我已经尝试过Is it possible to get a div's height to be 100% of a available area？和一些相同的问题，但没有运气。另外，我的实时 HTML 有背景图像，所以我不能只用 position:absolute 将页脚放在底部。

在那里我发布了我的 HTML 以进行预览：jsfiddle。

UPD：缩放实时预览： 在此处输入图像描述

4

2 回答 2

1

这是一个更新的小提琴

关键在于将主体设置为绝对定位到视口。从那里开始，如果您想让它像往常一样滚动，那么您可以将页脚的位置更改为固定，并将内容 div 的 CSS 更改为：

body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}

我已将您的内容 div 包装在另一个 div 中，以允许自动边距使您的页面居中，然后将页脚的框大小定义为边框框，以考虑您添加到其中的填充。

于 2013-03-08T14:59:26.670 回答
1

您必须将htmlandbody height属性设置为 100%；然后可以将footer高度设置为 100%；这将告诉主要容器元素 100% 的真正含义，它会起作用。

Your updated fiddle

基本上，这些是您必须添加的规则：

html, body {
    height: 100%;
}

footer {
    height: 100%;
}

更新

好的，我可能误解了您的要求，这是一个更简洁的示例：

Working example

基本上，你在这个例子中另外做的是让你的包装元素display:table带有一个height: 100%，然后你将你的footer显示设置为table-row。

重要说明：此解决方案使用display-table仅与 IE8+ 兼容的解决方案。如果支持IE7是您的问题，那么您有两种解决方案，我可以想到这些解决方案：

  1. 您可以使用固定宽度的页脚，将其推到内容下方，然后使用负数margin和padding.

  2. 或者，您可以通过使用一些 javascript 将页脚放置在适当的位置，从而回退到对旧浏览器的支持。

这是代码的细分：

HTML

<div class="wrapper">
    <header></header>
    <section class="main-content">
      {child elements of your main-content area}
    </section>
    <footer></footer>
</div>

CSS

html, body { 

  height: 100%;
  margin: 0;

}

.wrapper { 

  display: table;
  margin:  0 auto;
  height:  100%;

}

.main-content { 

  display: table-row;
  height: 100%;

}

footer { 

  display: table-row;

}
于 2013-03-08T14:55:31.257 回答