如何填满剩余高度的100% ?

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.

如上面所示，(1)的内容是未知的，因为它可能在动态生成的页面中增加或减少。如上所示，第二个div(2)应该填满剩余的空间。

here is an example of my html

这是我的html的一个例子

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css...

css……

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Or is this method wrong? How should I do this? please see my demo and show me my mistake.

还是这个方法错了?我该怎么做呢?请看看我的demo，看看我的错误。

7 个解决方案

#1

You should be able to do this if you add in a div (#header below) to wrap your contents of 1.

如果您添加一个div(下面的#header)来包装1的内容，您应该能够做到这一点。

If you float #header, the content from #someid will be forced to flow around it.

如果您浮动#header，来自#someid的内容将*围绕它流动。
Next, you set #header's width to 100%. This will make it expand to fill the width of the containing div, #full. This will effectively push all of #someid's content below #header since there is no room to flow around the sides anymore.

接下来，您将#header的宽度设置为100%。这将使它展开以填充包含的div #full的宽度。这将有效地将#someid的所有内容推送到#header中，因为没有任何空间可以在两边流动。
Finally, set #someid's height to 100%, this will make it the same height as #full.

最后，将someid的高度设置为100%，这将使它与#full一样高。

JSFiddle

HTML

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Update

更新

I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.

我认为值得一提的是，flexbox在当今的浏览器中得到了很好的支持。CSS可以被修改成#full变成flex容器，#someid应该设置它的flex增长值大于0。

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

#2

To get a div to 100% height on a page, you will need to set each object on the hierarchy above the div to 100% as well. for instance:

要使div在页面上的高度达到100%，您还需要将div上面层次结构上的每个对象设置为100%。例如:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

Although I cannot fully understand your question, I'm assuming this is what you mean.

虽然我不能完全理解你的问题，但我想这就是你的意思。

This is the example I am working from:

这是我正在研究的例子:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style is just a replacement for the CSS which I haven't externalised.

样式只是CSS的一个替代品，我没有外部化。

#3

This can be done with tables:

这可以用表来完成:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Then apply css to make someid fill the remaining space:

然后应用css使someid填满剩余空间:

#someid {
    height: 100%;
}

Now, I can just hear the angry shouts from the crowd, "Oh noes, he's using tables! Feed him to the lions!" Please hear me out.

现在，我只能听到人群中愤怒的喊声:“哦，不，他在用桌子!”喂它给狮子吃!请听我说完。

Unlike the accepted answer which accomplishes nothing aside from making the container div the full height of the page, this solution makes div #2 fill the remaining space as requested in the question. If you need that second div to fill the full height allotted to it, this is currently the only way to do it.

与公认的答案不同的是，除了使容器div成为页面的全高度之外，没有任何其他功能，这个解决方案使div #2填充了问题中要求的剩余空间。如果需要第二个div来填充分配给它的整个高度，这是目前惟一的方法。

But feel free to prove me wrong, of course! CSS is always better.

当然，你可以*地证明我是错的!CSS总是更好的。

#4

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }

    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>

#5

I know this is a late entry but even in 2016 I am surprised by the complete lack of IE support for flex (currently 11 is the only one to support it and its majorly buggy at that http://caniuse.com/#feat=flexbox) which from a business perspective is not great! So I think until IE is shut down the best solution and most cross-browser friendly one surely must be a JS/Jquery one?

我知道这是一个姗姗来迟的项目，但即使是在2016年，我也对flex完全缺乏IE支持感到惊讶(目前只有11个支持flex，而且在http://caniuse.com/#feat=flexbox上有很大的bug)，从商业角度来看，这并不好!所以我认为，在IE被关闭之前，最好的解决方案和最适合跨浏览器的解决方案肯定是JS/Jquery ?

Most sites already use Jquery and a very simple example (for my code) is:

大多数网站已经使用Jquery，一个非常简单的例子(我的代码)是:

$('#auto_height_item').height($(window).height() - $('#header').height());

You can obviously replace window and header and let the basic math do the work. Personally I'm still not convinced about flex yet...

您可以明显地替换窗口和标题，让基本的数学做这项工作。我个人还是不相信flex…

#6

I added this for pages that were too short.

我为太短的页面添加了这个。

html:

<section id="secondary-foot"></section>

css:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}

#7

-2

If your spaces need to fix exactly the borders of the screen you can try

如果您的空格需要精确地修改屏幕的边框，您可以尝试

make a big div with :

做一个大的div:

top:0; 
bottom:0;
margin:0px auto;

and inside make 2 divs with

里面有两个divs

height:50%; 
margin:0px auto;

It's very similar to the approach of thgaskell, but it's more flexible and CSS3 compliant. You can try to have a merge and test it to see if it fits best on all orientations and devices you need.

它与thgaskell的方法非常相似，但是它更加灵活，并且与CSS3兼容。您可以尝试合并并测试它，看看它是否适合您需要的所有方向和设备。

#1