How to fill 100% of remaining height?

2019-01-13 02:12发布

站内文章 / HTML/CSS

15 0

啃猪蹄的小仙女

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         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.

here is an example of my html

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

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.

回答1:

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

If you float #header, the content from #someid will be forced to flow around it.
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.
Finally, set #someid's height to 100%, this will make it the same height as #full.

JSFiddle

HTML

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

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.

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:

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.

回答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:

#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.

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

回答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?

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

$('#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...

回答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:

Create a div, which contains both divs (full and someid) and set the height of that div to the following:

height: 100vh;

The height of the containing divs (full and someid) should be set to "auto". That's all.

回答8:

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

make a big div with :

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

and inside make 2 divs with

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.