您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
问答- 问题:CSS如何将div高度设置为100％减去nPx

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

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

这是一个正常工作的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>
CSS 2022/1/1 18:22:08 有389人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

推荐问题

联系我

联系我

602392714

清零编程清零编程群

置顶