即使没有内容，如何强制DIV块扩展到页面底部？

190

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

这是我的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>

而我的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;
}
css  html  border 
— 文斯·帕努奇（Vince Panuccio）
source
如果有更多内容可以容纳在页面上，您希望它做什么？您在乎什么浏览器？
— drs9222

Answers:

117

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

html,body { height:100%; }

您可能还需要调整填充和边距，但这将使您获得90％的效率，如果需要使其与所有浏览器一起使用，您将不得不对其进行一些调整。

这个站点有一些很好的例子：

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://quirksmode.org/

— 杰森·埃尔南德斯（Jason Hernandez）
source
46
该解决方案对滚动页面不友好。
— jbranchaud 2011年
3
CSS中的min-height属性应该可以帮助他...我猜
— Alfabravo
1
有趣的是，这解决了我的滚动问题，而不是导致滚动问题
— Alan Macdonald
在最新版的chrome中，它不适用于我。
— HelloWorldNoMore
48

我将尝试直接在标题中回答问题，而不是一味地将页脚粘贴到页面底部。

如果没有足够的内容来填充可用的垂直浏览器视口，则使div扩展到页面底部：

演示位于（拖动框架手柄以查看效果）：http : //jsfiddle.net/NN7ky
（上方：干净，简单。下方：需要flexbox- http ://caniuse.com/flexbox ）

HTML：

<body>

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

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

</body>

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-否则我太困了

— 吉玛
source
14
我们中有些人很幸运，仅支持“现代”浏览器，因此这对我来说非常有用。谢谢吉玛 我尝试了几种方法来做这样的事情，但是它总是以各种微妙的方式被打破。这样好多了。仍然不完全了解为什么它会这样工作。
— 克里斯·尼古拉
1
Flexbox元素试图在其元素之间划分其内容区域。我提供的解决方案是：1）拒绝div的缩小，以及2）启用.div2。因此，div不会收缩以隐藏其内容，并且只允许扩展.div2。
— Gima 2014年
因此，这解决了我在Firefox中遇到的问题，该内容对于浏览器来说仍然有点太大。不幸的是，仅在Chrome中，这不能解决该问题。但是，也可以将边距和填充设置为0。
— Michael Scheper
这是正确的答案，最小高度：仅当父容器中没有更多东西时，100％才有效；如果上方扩展元素的同级具有未知高度，则calc并不能真正起到帮助作用
— zakius
经过数小时的努力，这才是真正为我解决的唯一解决方案。只缺少每个部分的作用的一些解释。但是无论如何，非常感谢@Gima。
— pylund '17
18

尝试使用以下css规则：

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

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

— 凯文·雷德
source
这行得通，但是我发现如果将最小高度增加到600px以上，则会创建滚动。您知道为什么会这样吗？
— Siddharth Patel 2014年
1
@SiddharthPatel因为#content div的父级溢出。因此，将#content div的父级设置为具有overflow：auto或overflow：hidden css值，并且它应该扩展/溢出以适合而不是滚动。下次将这样的问题作为新问题而不是发表评论可能会更好:)
— Colt McCormack 2015年
在尝试了每个答案的方法之后，这是唯一可行的方法。即使这样也能很好地工作，因为我必须调整高度值以匹配页面的高度，因此需要进行调整。但是，它确实适用于所有浏览器。
— 塔库斯16-3-6
非常感谢您的回答。它很简单，并且可以在多个平台上很好地工作。大约1年前，我实际上没有意识到就使用过此功能，希望我能投票两次。
— vedi0boy
3

并非所有浏览器都支持min-height属性。如果您需要#content来扩展较长页面上的高度，height属性将使其缩短。

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

— 基因
source
3

尽管它不如纯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>
— 亚当·佛朗哥（Adam Franco）
source
3

尝试：

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

还没测试过...

— 史蒂芬
source
3

固定高度的粘性页脚：

HTML方案：

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

CSS：

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
— 大卫·霍拉克
source
2

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

上面的链接已关闭，但此链接https://stackoverflow.com/a/18066619/1944643可以。：D

演示：

<!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>
— ViniciusJoséLatorre
source
1
@codemirror谢谢，我刚刚用另一个有效的链接编辑了评论。
— ViniciusJoséLatorre '18
1

您可以将“ vh”长度单位用于元素本身及其父元素的min-height属性。从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;
}
— 尼科
source
这只会将div拉伸到视口的高度，而不是页面本身。
— jansmolders86 '18
1

我认为仅将html填充为100％即可解决此问题，可能是正文填充了html的100％，但html不能填充100％的屏幕。

尝试： 

html, body {
      height: 100%;
}
— 大卫·马西尔
source
0

我没有代码，但我知道我曾经使用height：1000px和margin-bottom：-1000px; 试试看

— 亚历山大·莫兰德
source
哇，这确实有效！但是，如果内容溢出了容器，就不可能看到溢出的部分……
— adripanico
0

根据布局的工作方式，您可能不愿意在<html>元素上设置背景，该背景始终至少是视口的高度。

0

仅使用样式表（CSS）无法完成此操作。某些浏览器不接受

height: 100%;

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

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

— 马丁
source
-2

我知道这不是最好的方法，但是我不能弄清楚它的标题，菜单等位置，所以无法解决。所以。。。我为那两个柱子用了一张桌子。这是一个快速修复。不需要JS;）

— 文德
source
-2

不是最好的标准，也不是最好的标准的最佳实现，但是您可以为SPAN更改DIV ...这不是一个值得推荐的方法，但是它是快速解决的= P =）

— Metafaniel
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.