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

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

下面是我的演示:

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; } <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> </form>

当前回答

#content {
    height: calc(100% - the amount of pixels the content div is away from the top);
}

所以如果你的div是从顶部200px，你需要的代码将是

#content {
    height: calc(100% - 200px);
}

2021-09-07 12:40:08

其他回答

我将尝试在标题中直接回答这个问题，而不是拼命在页面底部添加页脚。

如果没有足够的内容来填充可用的垂直浏览器视口，让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;
}

哒哒，或者我只是太困了

2014-06-02 02:08:51

固定高度的粘脚:

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;
}

2013-08-15 08:42:15

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

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

2008-09-29 04:46:43

根据布局的工作方式，你可能会在<html>元素上设置背景，它总是至少是视口的高度。

2009-02-23 19:29:45

虽然它不像纯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>

2008-09-30 03:39:18

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

推荐文章

最新文章

标签