如何强制一个DIV块扩展到页面的底部，即使它没有内容?

[英]How do I force a DIV block to extend to the bottom of a page even if it has no content?

本文翻译自 Vince Panuccio 查看原文 2008/09/29 282276 border/ css/ html

In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.

在下面显示的标记中，我试图让content div一直延伸到页面的底部，但只有当有内容要显示时，它才会扩展。我这样做的原因是，即使没有显示任何内容，垂直边框仍然会出现在页面下方。

Here is my HTML:

这是我的HTML:

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

And my CSS:

和我的CSS:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

18 个解决方案

#1

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

您的问题不是div的高度不是100%，而是它周围的容器不是。这将有助于我怀疑你正在使用的浏览器:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

您可能也需要调整填充和边距，但这将使您达到90%的效果。如果您需要使它与所有浏览器一起工作，您将不得不对它进行一些混乱。

This site has some excellent examples:

这个网站有一些很好的例子:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

http://www.brunildo.org/test/html_body_0.html http://www.brunildo.org/test/html_body_11b.html http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

我还建议您访问http://quirksmode.org/

#2

I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.

我将试着直接在标题中回答这个问题，而不是固执地把脚注贴在页面底部。

Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:

Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)

在(拖动框架句柄以查看效果):http://jsfiddle.net/NN7ky(好处:干净，简单。缺点:需要flexbox - http://caniuse.com/flexbox)

HTML:

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - or i'm just too sleepy

或者我太困了

#3

Try playing around with the following css rule:

尝试使用以下css规则:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Change the height to suit your page. height is mentioned twice for cross browser compatibility.

更改高度以适合您的页面。为了跨浏览器兼容性，两次提到高度。

#4

you can kinda hack it with the min-height declaration

你可以用minheight声明来破解它。

<div style="min-height: 100%">stuff</div>

#5

Try Ryan Fait's "Sticky Footer" solution,

试试Ryan Fait的“粘脚”解决方案，

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

http://ryanfait.com/sticky-footer/ http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.

在IE、火狐、Chrome、Safari和Opera上都可以使用，但还没有测试过。这是一个很好的解决方案。非常容易和可靠的实现。

#6

The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.

不是所有浏览器都支持最小高度属性。如果您需要您的#content来扩展它在较长的页面上的高度，那么height属性将使它缩短。

It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed

这有点麻烦，但您可以在#content div中添加一个宽度为1px、高度为1000px的空div。这将迫使内容至少为1000px高，并在需要时允许更长的内容扩展高度

#7

While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:

虽然它没有纯CSS那么优雅，但是一点点javascript就可以帮助实现这一点:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

#8

Try:

试一试:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Haven't tested it yet...

还没有测试过……

#9

Sticky footer with fixed height:

固定高度粘脚:

HTML scheme:

HTML方案:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

#10

I think the issue would be fixed just making the html fill 100% also, might be body fills the 100% of the html but html doesn't fill 100% of the screen.

我认为这个问题是可以解决的仅仅是让html填充100%也可能是正文填充100%的html但是html并不能填充100%的屏幕。

Try with:

试一试:

html, body {
      height: 100%;
}

#11

Try http://mystrd.at/modern-clean-css-sticky-footer/

试试http://mystrd.at/modern-clean-css-sticky-footer/

The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D

上面的链接是向下的，但是这个链接https://stackoverflow.com/a/18066619/1944643是可以的。:D

Demo:

演示:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

#12

Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

你可能也喜欢这个:http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

It isn't quite what you asked for, but it might also suit your needs.

这不是你想要的，但也可能适合你的需要。

#13

I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.

我没有代码，但我知道我曾经用过一个组合:1000px和margin-bottom: -1000px;试试。

#14

Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.

根据布局的工作方式，您可以在元素上设置背景，这至少是viewport的高度。

#15

It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept

仅使用样式表(CSS)是不可能实现这一点的。一些浏览器不会接受

height: 100%;

as a higher value than the viewpoint of the browser window.

作为比浏览器窗口的视点更高的值。

Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.

Javascript是最简单的跨浏览器解决方案，尽管如上所述，它不是一个干净或漂亮的解决方案。

#16

You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:

可以使用“vh”长度单位表示元素本身及其父元素的最小高度属性。IE9以来支持:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

#17

-1

I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)

我知道这不是最好的方法，但我不能在不弄乱我的头、菜单和其他位置的情况下找出答案。所以....那两列我用了一张桌子。这是一个快速修复。不需要JS;)

#18

-1

Not the very best nor the best implementation of the greatest standards, but you can change the DIV for a SPAN... It's a not so recommendable but fast fix =P =)

不是最优标准的最佳实现或最佳实现，但是您可以在一段时间内更改DIV……不是很推荐但是快速修复=P =)

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2008/09/29/842a3832f31452de7100ed7a53fa5ffb.html。

猜您在找

将div扩展到页面底部(只有HTML和CSS) - Extend div to bottom of page (only HTML and CSS) SSRS报告 - 强制表扩展到页面底部 - SSRS Reports - force table to expand to bottom of page 容器不会扩展到页面的底部 - container won't extend to the bottom of the page 如何将页脚扩展到页底? - how can i extend a footer to bottom of page? 即使内容较少，如何在网页的右下角对齐div？ - How do I align a div at the bottom right corner of a web page even if the content is less?

赞助商链接