Question

我在以下布局中有一个div

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:100%">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

我的问题是divContent如何拥有100％的身高。我需要它做的是占用divBody的整个高度减去divHeader的高度。所以我将divContent的高度设置为auto：

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:auto">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

现在divContent的高度是正确的，它是divBody的100％减去divHeader的高度，但是现在divLeft的高度不会填充100％的父级（divContent）。我怎样才能在这里获得两全其美？

Answer 1

您应继续使用百分比，而不是使用标头的固定像素数量。标题和内容的宽度应为100％，但高度为“自动”，因此它实际上会根据您正在使用的正文div中的实际需要进行调整。

关于div左右两者，两者都应该设置为高度100％我猜

Answer 2

如果您关心的是两列的高度和固定的标题高度，那么可以帮助您实现这一目标。

考虑这个HTML：

<html style="height:100%">
<body style="height:100%">
    <div id="divBody">
        <div id="divHeader">Header</div>
        <div id="divContent">
            <div id="divLeft">Left</div>
            <div id="divRight">Right</div>
        </div>
    </div>
</body>
</html>

以下CSS：

#divBody {
    height: 100%;
    width: 1000px;
    overflow: hidden;
}

#divHeader {
    height:30px;
    background-color: Yellow;
}

#divContent {
    height:auto;
    background-color: Aqua;
    position: relative;
}

#divLeft {        
    height:100%;
    float:left;
    width:200px;
    border-left:1px solid black;
    background-color: Azure;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

#divRight {
    height: 100%;
    width:800px;
    background-color: Pink;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

这是JSFiddle的插图：http://jsfiddle.net/3rDNC/

Answer 3

这是一个老问题，但这是我的两分钱使用calc（100％ - 30px）来减去标题大小：

#divContent {
    height: calc(100% - 30px);
    background-color: Aqua;
    position: relative;
}

Answer 4

由于您知道#divHeader的高度为30像素，因此您的问题的简单答案是像这样在calc()上使用#divContent：

#divContent {
  height: calc(100% - 30px);
}

困难的部分是当其他兄弟姐妹的高度未知或动态时，设置#divContent之类的兄弟姐妹的高度。那是CSS Flex派上用场的时间：

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%;
}

类别为bottom的元素将使用100％的高度减去其同级的高度。 flex-shrink: 0规则很重要，主要是对于iOS设备而言，以避免兄弟姐妹之间的收缩。

Working example on Codepen here。

指定div的高度为容器的100％减去兄弟div的高度

4 个答案: