CSS如何将div高度设置为100％减去nPx
我有一个包装器div，其中两个容器彼此相邻。在此容器上方，我有一个包含我的标头的div。包装div必须为100％减去标题的高度。标头约为60像素。这是固定的。所以我的问题是：如何将包装div的高度设置为100％减去60像素？
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
问题答案：
这是一个正常工作的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}
w3c尚未批准“ overflow-y”，但是每个主流浏览器都支持它。如果两个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>
-
问题内容： 我加载了Google Maps API v3，并在中打印了Google Map 。但是，当将width＆height设置为100％并且是auto时，我看不到地图。 这是HTML代码段。 有没有解决此问题的方法？ 问题答案： 如果要用它覆盖整个页面，则必须将所有父容器的宽度设置为100％。您必须至少为#content div的宽度和高度设置一个绝对值。
-
问题内容： 我有三分之二的div。所包含的div之一向左浮动，另一个向右浮动。我希望2个同级div始终处于相同的高度，但是对此存在问题。到目前为止，我只在Firefox中查看该页面，并认为在至少一个浏览器中运行它后，我会担心任何跨浏览器的问题。 这是标记： 这是CSS： 如果中的内容长于，则不会扩展为匹配。在我尝试了一个例子，说的Firefox的计算式的高度是，的计算式的高度是和的计算的风格高度为
-
问题内容： 我希望轮播DIV（s7）扩展到整个屏幕的高度。我不知道为什么它不成功。 问题答案： 为了使百分比值适合身高，必须确定父母的身高。唯一的例外是 root 元素，它可以是百分比高度。。 因此，您已将除之外的所有元素赋予了高度，因此您应该添加以下内容： 而且您的代码应该可以正常工作。
-
问题内容： 我正在为一个非常简单的库webapp进行布局排序，但是当我使用HTML5 doctype声明时，我的某些div的高度（即100％）会缩小，而我似乎无法保持饱满他们使用CSS进行备份。 如果我删除HTML5 doctype声明，则一切都如我所愿，但我确实想使用正确的HTML5 doctype声明。 如果我将doctype设置为HTML5并且未进行任何更改，则包含照片的div和页脚div将
-
问题内容： 是否可以使包装器填充窗口高度（不滚动），并且可以使div滚动中心而不弄乱像素和javascript？ 基本上，我希望页眉在顶部可见，而页脚在底部始终可见，并且在中心具有可滚动的内容，占据剩余的高度。 页眉，页脚和中心div的高度都是未知的（未设置px或％，即可变的字体大小或填充）。纯CSS可能吗？ 问题答案： html, body {
-
问题内容： 我想基于CSS表达式设置div的高度。 基本上，应将其设置为 我尝试过以下操作的视口 宽度的 某些百分比（例如90％），但不起作用； 我正在寻找一种跨浏览器的方式（IE7 +，FF4 +，Safari） 问题答案： 除IE之外，CSS表达式均不受支持（即使在那里也被认为是一个坏主意）。 但是，实际上并没有其他方法可以完成您要问的事情，至少不仅仅使用CSS。 唯一的选择是使用Javasc