logo标签列表

将div的高度指定为容器高度减去相邻div的高度的100%

htmlcss
4
我有一个如下布局的divs：
<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现在具有body的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减去divHeader高度的100％，但是现在divLeft的高度没有填满其父元素（divContent）的100％。我该如何在这里兼顾两者？

1
对于这个问题，我会使用jQuery的css方法。 - James Wright
将其设置为100％高度的目的是什么？仅仅是为了显示不同的背景吗？还是为了启用滚动？或者是为了圆角？ - MK_Dev
从Web应用程序的角度来看，如果整个窗口都包含在内，而不仅仅是内容部分，那么应用程序的整体外观和感觉会更有意义。 - Jeremy
4个回答
5

既然您知道 #divHeader 的高度为30px，那么对于您的问题，简单的答案就是在#divContent上使用calc()函数，像这样：

#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设备特别重要，以避免在兄弟元素上收缩。

在Codepen上的工作示例在这里。

1
你应该继续使用百分比而不是固定像素来设置页眉。页眉和内容的宽度应该是100％，但高度应该是“自动”，这样它就可以根据你正在使用的body div的实际需要进行调整。
关于左右div，我想两者都应该设置为高度100%。
确认一下，左右两侧高度设为100%没问题...但是像Sebastien所说的那样，请使用百分比。 - Vladimir
我已将标题和内容高度设置为自动，但没有变化，仍然无法使divLeft和divRight填充整个高度。 - Jeremy
0

这是一个老问题，但是我的建议是使用calc(100% - 30px)来减去标题的大小：

#divContent {
    height: calc(100% - 30px);
    background-color: Aqua;
    position: relative;
}
如果30像素是相对的，而且你没有任何固定高度，你会怎么做呢？ - dguay
0
如果您只关心两列的高度和固定标题的高度，那么有一个CSS技巧可以帮助您实现这一点。
考虑以下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/

​
哇，这似乎确实有效，但我不明白填充和边距实际上是做什么的。这对于跨浏览器支持如何？ - Jeremy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接