CSS div positioning_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-19 06:05 出处：网络

I have div that contai开发者_如何学运维ns 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do th

相关专题：css

Edit: I need the parent div to fill the screen.

This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.

Assuming:

<div id="parent">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

use:

#top { height: 2em; }

and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.

But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.

One approach is to overlay the top with the bottom.

#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }

The top div actually overlays the bottom. This is fine so long as you don't want a border.

You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).

Example:

<head>
    <title>TITLE</title>
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #parent { height: 100%;  background: #f08; }
        #top { height: 2em; background: #80f; }
    </style>
</head>
<body>
<div id="parent">
    <div id="top">TOP DIV</div>
    <div id="bottom">THE REST</div>
</div>

Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?