2

我在以下布局中有一个 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 的高度设置为自动：

<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 的高度并没有填满它的父级（divContent）的 100%。我怎样才能在这里两全其美？

4

4 回答 4

1

您应该继续使用百分比，而不是使用固定数量的像素作为标题。header 和 content 的宽度应该是 100%，但是高度是“auto”，所以它实际上会根据你使用的 body div 中的实际需要进行调整。

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

于 2012-05-15T22:23:07.110 回答
1

既然您知道 的高度#divHeader是 30px，那么您的问题的简单答案就是这样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 设备，以避免缩小同级设备。

Codepen 的工作示例在这里。

于 2020-02-25T13:09:35.907 回答
0

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

考虑这个 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/

​
于 2012-05-15T22:40:02.523 回答
0

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

#divContent {
    height: calc(100% - 30px);
    background-color: Aqua;
    position: relative;
}
于 2017-09-12T15:56:24.517 回答