css div 定位和溢出问题，很难理解

Question

我无法理解为什么我的某些 DIV 没有扩展到 "content" DIV 的高度。它只能是 css/html。

层次结构

-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used just to center the "center" div, may have content)
----[-]center (center of page containing content)
--------[o]header (will only have small line of text)
--------[o]content (when height overflows, it should expand all other heights)
----[-]footer (resource & contact links, should always be at the bottom)

CSS

  *{
        font-family: Arial Black,Arial Bold,Gadget,sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;    
        border:0px;
        margin:0px;
        padding:0px;
    }
    .wrapper{
        position:absolute;
        width:100%;
        height:100%;
        background-color:black;
    }
    .left{
        position:absolute;
        left:0px;
        width:220px;
        height:100%;

        background-color:red;
    }
    .right{
        position:absolute;
        right:0px;
        width:220px;
        height:100%;

        background-color:blue;
    }
    .center{
        position:absolute;
        right:220px;
        left:220px;

        background-color:yellow;
    }
    #header{
        float:left;
        height:40px;
        width:100%;
        background-color:silver;
    }
    #footer{
        position:absolute;
        bottom:0px;
        height:20px;
        width:100%;

        background-color:silver;
    }
    #content{
        float:left;
        top:40px;
        bottom:20px;
        margin:20px;

        background-color:orange;
    }

HTML

<body>
    <div class="wrapper">
        <div class="left">
        </div>
        <div class="right">
        </div>
        <div class="center">
            <div id="header">
            </div>        

            <div id="content">
            </div>

        </div>
        <div id="footer">
            </div>
    </div>
</body>

这是我的 jfiddle：JFIDDLE

Answer 1

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */

  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor</div>
  <div class="col">Lorem ipsum dolor sit amet</div>
</div>

参考this link you will get the solution for it or if you don't want to use css then go for Javascript. Refer this jquery plugin for that purpose - jquery-match-height

Answer 2

你设置了 .wrapper div 的 position:absolute, 高度为 100%;, 所以它只取他所在容器的高度,(这就是绝对定位元素的工作方式)

问题是我认为你 过度使用绝对位置 一点点，看到它是一个强大的工具但不是那么适合布局组合，你可以使用 浮动基本布局，或内联块或弹性布局

flex 将像

一样工作

.wrapper {
display: flex;
}

.left {
  flex-grow: 1 
}
.right {
  flex-grow: 1 
}
.content {
  flex-grow: 3 
}

但您必须将页脚从包装纸中取出，或者您可以添加其他子项 div，例如

<div class="wrapper">

    <div class="main">
          <div class="left"></div>
          <div class="right"></div>
          <div class="center"></div>
    <div>

    <div id="footer"></div>

</div>

现在只需将 flex 属性添加到 main，然后将 flex 扩展到 childrens

记住口粮的弹性工作，上面的 css 意味着 .contnet dive 将占用 .lef 或 .right 宽度的 3 倍 div

即左侧 20% 宽度，右侧 20% 宽度，中心 60% 宽度，

css div 定位和溢出问题，很难理解

css div positioning and overflow issue, hard time understanding

html

css

position

overflow