Question

我很难理解为什么我的某些DIV没有扩展到我的内容＆＃34; DIV的身高。它必须只是css / html。

层次

- [+]包装
  ---- [ - ] left（将包含导航栏）
  ---- [ - ]右（仅用于居中＆＃34;中心＆＃34; div，可能有内容）
  ---- [ - ] center（包含内容的页面中心）
  -------- [o]标题（只会有小行文字）
  -------- [o]内容（当高度溢出时，它应该扩展所有其他高度）
  ---- [ - ]页脚（资源和联系人链接，应始终位于底部）

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

txtMargin

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

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

  padding: 1em;
  border: solid;
}

请参阅this link您将获得解决方案，或者如果您不想使用css，请转到Javascript。为此目的，请参阅此jquery插件 - jquery-match-height

Answer 2

你设置.wrapper div的位置：绝对，高度100％;所以它只取他所在容器的高度，（这就是绝对定位元素的工作方式）

问题是我认为你过度使用绝对位置一点点，看它是一个强大的工具，但对于布局组合没有那么好，你可以使用浮点基础布局，或内联块或 flex布局

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潜水需要3倍宽度.lef或.right div

，左边宽20％，右边宽20％，中心宽60％，

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

2 个答案: