使嵌套的div伸展到剩余容器div高度的100％ [英] Make nested div stretch to 100% of remaining container div height

问题描述

我有一个容器div，我想伸展到至少整个窗口的高度。如果容器div中有很多内容，我想让它伸展到超过窗口的高度。这个工作。

在容器div我有一个图像。之后/下面的图像，我有一个第二个div。我想要这个嵌套的div垂直拉伸填充容器div的剩余空间。这不工作。

我试图说明此图片中的问题< a>。我想让div以右侧图片的左侧所示的方式伸展，而不是看起来位于右侧图片的右侧。

以下是我的代码。正如你可以看到，在这段代码中，我甚至不尝试使图像下的div垂直，因为没有什么工作。 Height：100％没有做任何窍门，因为我默认定义了100％作为窗口的高度，以使容器div至少伸展到窗口的高度。

风格：

  * { 
 margin：0; padding：0; 
} 
 
 body {
 overflow-y：scroll; 
 overflow-x：hidden; 
} 
 
 body，html {
 height：100％; 
} 
 
 .container {
 display：block; 
 overflow：auto; 
 min-height：100％; 
 height：100％; 
 height：auto; 
} 
 
 .bottom {
 width：100％; 
} 
  

HTML： b

 < div class =container> 
 
< img src =image.jpgwidth =100％> 
 
< div class =bottom> 
 LOREM IPSUM 
< / div> 
 
< / div> 
  

解决方案

我花了太多时间

尤里卡的时刻正在阅读其他问题，人们问我怎么能做到没有使用表？因为当然这种布局很容易与表。但是这让我想起 display：table 。

正如这篇博客文章所说，使用 display：table 为您提供表布局，而不会出现错误的标记开销为HTML表格布局，允许您为不同的媒体查询添加语义代码和不同的布局。

我最终不得不将一个更改为标记：< div> 图片。此外，处理表格显示时，最大/最小高度也很奇怪： height 设置被视为给定父元素和子元素约束的首选高度。因此，在 display：table-row 上设置高度为零的包装器div使得该行适合于内容图像。在内容div上设置100％的高度，可以很好地填充图片和父容器的最小高度之间的空间。

Voila！

只收集基本代码： / p>

标记：

 < div class =container 
< div class =wrapper> 
< img src =http://placekitten.com/600/250/> 
< / div> 
< div class =bottomcontentEditable =true> 
< / div> 
  

CSS：

 code> body {
 overflow-y：scroll; 
 overflow-x：hidden; 
} 
 body，html {
 height：100％;} 
} 
 .container {
 display：table; 
 width：100％
 height：100％; / *这将被视为最小！ 
它将拉伸到适合内容* / 
} 
 div.wrapper {
 display：table-row; 
 height：0px; / *尽可能少，
同时仍然适合内容* / 
} 
 img {
 display：table-cell; 
 width：100％; / * scale to fit * / 
} 
 .bottom {
 display：table-cell; 
 height：100％; / *尽可能多使用* / 
} 
  

适用于Firefox 25，Chrome 32 ，Opera 18和IE10。在IE 8中不工作，但是什么呢？它在IE8中看起来不是 ，它只是不伸展适合。

如果您可以在Safari，IE9或移动浏览器中测试，请发表评论。

I have a containter div, which I want to stretch to at least the entire height of the window. If there's a lot of content in the container div, I want it to stretch to more than the window's height. This works.

In the container div I have an image. After/below the image, I have a second div. I want this nested div to stretch vertically to fill the remaining space of the container div. This doesn't work.

I've tried to illustrate the problem in this image. I want the div to stretch in the way illustrated in the left side of the right image, not as it looks on the right side of the right image.

The following is my code. As you can see, in this code I don't even try to make the div under the image stretch vertically, as nothing has worked. "Height: 100%" doesn't do the trick, as I've defined "100%" to be the height of the window by default, in order to make the container div to stretch to at least the window's height.

Style:

* { 
  margin: 0; padding: 0;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body, html { 
  height: 100%;
}

.container {
  display: block;
  overflow: auto;
  min-height: 100%;
  height: 100%;
  height: auto;
}

.bottom {
  width: 100%;
}

HTML:

<div class="container">

<img  src="image.jpg" width="100%">

<div class="bottom">
LOREM IPSUM
</div>

</div>

解决方案

I have spent way too much time trying to figure it out, but by George I've got it!

The "Eureka" moment was reading other questions where people were asking "how can I do it without using tables?" Because of course this layout is easy with tables. But that made me think of display:table.

As this blog post nicely argues, using display:table gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.

I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.

Voila!

Condensing just the essential code:

Markup:

<div class="container">
    <div class="wrapper">
        <img src="http://placekitten.com/600/250" />
    </div>
    <div class="bottom" contentEditable="true">
</div>

CSS:

body {
    overflow-y: scroll;
    overflow-x: hidden;
}
body, html {
    height: 100%;
}
.container {
    display: table;
    width: 100%
    height: 100%; /* this will be treated as a Minimum!
                     It will stretch to fit content */
}
div.wrapper{
    display:table-row;
    height:0px; /* take as little as possible, 
                   while still fitting content */
}
img {
    display:table-cell;
    width:100%; /*scale to fit*/
}
.bottom {
    display:table-cell;
    height:100%; /* take as much as possible */
}

Works in Firefox 25, Chrome 32, Opera 18 and IE10. Doesn't work in IE 8, but then what does? It doesn't look broken in IE8, it just doesn't stretch to fit.

If you can test it in Safari, IE9, or mobile browsers, leave a comment.

这篇关于使嵌套的div伸展到剩余容器div高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！