Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

html - How to fill 100% of remaining height?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...