CSS如何设置div高度100％减去nPx

小编典典

CSS如何设置div高度100％减去nPx

all

我有一个包装器 div，它包含 2 个彼此相邻的 div。在这个容器上方，我有一个包含我的标题的 div。包装器 div 必须是 100%
减去标题的高度。标题约为 60 像素。这是固定的。所以我的问题是：如何将包装器 div 的高度设置为 100% 减去 60 像素？

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

阅读 109

2022-06-22

共1个答案

小编典典

这是一个有效的 css，在 Firefox / IE7 / Safari / Chrome / Opera 下测试。

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

“overflow-y” 不是 w3c 认可的，但每个主流浏览器都支持它。如果它们的内容太高，您的两个 div #left 和 #right
将显示一个垂直滚动条。

为了在 IE7 下工作，您必须通过添加 DOCTYPE 来触发标准兼容模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

    *{margin:0px;padding:0px;overflow:hidden}

    div{position:absolute}

    div#header{top:0px;left:0px;right:0px;height:60px}

    div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}

    div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}

    div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

</style>

</head>

<body>

<div id="header"></div>

<div id="wrapper">

  <div id="left"><div style="height:1000px">high content</div></div>

  <div id="right"></div>

</div>

</body>

2022-06-22