HTML/CSS Div(height: 80px) over Div(height:100%;)_问答_开发者

HTML/CSS Div(height: 80px) over Div(height:100%;)

开发者 https://www.devze.com 2023-03-31 18:40 出处：网络

i try to get my Homepage-Layout to work. Now the height of the div \"list\" should be 80px smaller from bottom.

相关专题：css height

i try to get my Homepage-Layout to work.

Now the height of the div "list" should be 80px smaller from bottom. I made some tests with margin and position: absolute but I couldn't get it.

#body, #left, #map, #list {
  height: 100%;
}

#left {
  float:left; 
  width:270px;
}

#head {
  height:80px; 
  background-color:blue;
}

#list {
  overflow:auto;
  background-color:green;
}

#map {
  background-color:red;
}

<body >
  <div id="left">
    <div id="head"> </div>  
    <div id="list"> </div>
  </div>
  <div id="map"> </div>
</body>

this is how it should look like:

     280px      100%
     ______________________
80px|head |map             |
    |_____|                |
    |list |                |
    |     |                |
    |     |                |
100%|     |                |
    |_____|________________|

this is how it looks like now:

    开发者_如何学C 280px      100%
     ______________________
80px|head |map             |
    |_____|                |
    |list |                |
    |     |                |
    |     |                |
100%|     |                |
    |     |________________|
    |     |
    |_____|

Thanks in advance

The problem is that you're not specifying a height at all for your div (except #head).

If you want list to have a height, you have the choice to specify a direct height to #left or to #list.

See here for an example with the #left height set to something (and not 100%).

So now (since your answer) I understand your problem.

To solve it, the following is needed:

add position:absolute to #head
add width:100%; to #head
add position:relative to #left

Explanation:

The position absolute will put #head in the top left corner of his closest parent. It's width will default to 0. So we need to put it to 100% to take all the parent width. However the reference for an absolute positioned div is the closest parent that has a position that is either absolute or relative (or the body if nothing matches). So we set the position of #left to relative in order to have it has a reference for #head. No absolute because we don't want it to be crushed by map