在 CSS 中保持页脚可见且高度为 100%

发布于 2024-09-02 01:10:52 字数 905 浏览 4 评论 0 原文

我正在尝试创建一个非常简单的页面，其中包含容器、页眉、左栏和页脚：

<containter>
<header />
<content />
<leftBar />
<footer />
</containter>

我想使用 100% 的高度，就像我可以使用宽度一样，但我只是不t让它工作。目前我正在使用min-height，但是我如何使用height:100%`？我喜欢的是页脚始终可见，并且您可以滚动内容。

当前 CSS

body
{
    font-family: Verdana;
    font-size: 0.8em;
    background-color:#f1f1f1;
}

#container {
   border:solid 2px Black;
   position:absolute;
   left:10%;
   width:80%;
   margin:auto;
}

#header {
  height:20px;
  background: #DDDDDD;
}

#leftBar {
  width: 20%; 
  background: #669966; 
  min-height:600px;
  postion:absolute;
  top:20px;
  bottom:20px;
}

#content {
  float:right;
  background-color: #cdcde6;
  position:absolute;
  left:20%;
  right:0px;
  bottom:20px;
  top:20px;
  padding:5px;
}

#footer {
 position:absolute;
 height:20px;
}

原文

I'm trying to create a very simple page that contains a container, a header, a left column and a footer:

<containter>
<header />
<content />
<leftBar />
<footer />
</containter>

I want to use the 100% of the height, as I can do with the width, but I simply dont get it work.At his moment I'm using min-height, but how could I use the height:100%` ? What I like is that the footer is always visible, and you scroll the content.

Current CSS

body
{
    font-family: Verdana;
    font-size: 0.8em;
    background-color:#f1f1f1;
}

#container {
   border:solid 2px Black;
   position:absolute;
   left:10%;
   width:80%;
   margin:auto;
}

#header {
  height:20px;
  background: #DDDDDD;
}

#leftBar {
  width: 20%; 
  background: #669966; 
  min-height:600px;
  postion:absolute;
  top:20px;
  bottom:20px;
}

#content {
  float:right;
  background-color: #cdcde6;
  position:absolute;
  left:20%;
  right:0px;
  bottom:20px;
  top:20px;
  padding:5px;
}

#footer {
 position:absolute;
 height:20px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆流 2024-09-09 01:10:52

/**
 * The following allows the usage of height=100% in body tag.
 * Creds to: http://apptools.com/examples/tableheight.php
 */
html,body
{
    margin    : 0;
    padding    : 0;
    height    : 100%;
    border    : none;
}

您需要使其 html 和 body 占据 100% 的浏览器视口。

/**
 * The following allows the usage of height=100% in body tag.
 * Creds to: http://apptools.com/examples/tableheight.php
 */
html,body
{
    margin    : 0;
    padding    : 0;
    height    : 100%;
    border    : none;
}

You need to make it so html and body take 100% of the browser viewport.

回复收藏 0 原文

赠我空喜 2024-09-09 01:10:52

我不确定这是否正是您所要求的，但在 css 布局方面它是一个很好的资源 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts。它还有一篇文章解释如何将其添加到容器中： http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width

回复收藏 0 原文

那请放手 2024-09-09 01:10:52

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  html, body { margin: 0 auto; height: 100%; }
  #container { height: 100%; width: 80%; background: #e0e0e0; margin: 0 auto;}
</style>
</head>
<body>
  <div id="container">
  </div>
</body>
</html>

http://jsbin.com/uyezu

技巧是将 html,body 扩展到 100%

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  html, body { margin: 0 auto; height: 100%; }
  #container { height: 100%; width: 80%; background: #e0e0e0; margin: 0 auto;}
</style>
</head>
<body>
  <div id="container">
  </div>
</body>
</html>

http://jsbin.com/uyezu

Trick is to expand html,body to 100%

回复收藏 0 原文