我已经在其他几个背景下看过这个问题了,但我认为值得再次询问我的具体案例.我正在尝试创建一些可重用的CSS类,以便在我的网站上实现更高的一致性和更少的混乱,而且我一直试图标准化我经常使用的一件事.
我有一个容器div,我不想设置它的高度(因为它会根据网站的位置而有所不同),里面是一个标题div,然后是一个无序的项目列表,所有这些都是CSS适用于他们.看起来很像这样:

我希望无序列表占用容器div中剩余的空间,知道标题div是18px高.我只是不知道如何将列表的高度指定为"100%减去18px的结果".有没有人在这种情况下有任何建议?
是否有可能div在纯CSS 中使50px小于100%?我希望<div>它只比50%小于100%.我不想要任何JavaScript.
我想为管理面板创建一个布局,但我不知道如何将#nav和#content容器始终保持在浏览器窗口的100%.我不明白100%高度属性的继承,有人可以更清楚地解释它吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index.htm</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="header">
<img src="./img/header_logo.png" alt="bla"/>
</div><!-- #header -->
<div id="nav">
</div><!-- #nav -->
<div id="content">
asfdg
</div><!-- #content -->
<div class="clear">
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
的main.css
html, body{
font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
}
img{
margin: 0px;
padding: 0px;
border-width: 0px;
}
#wrapper{
}
#header{
background: url(img/header_bg.png) repeat-x;
height: 65px;
padding-top: 20px;
padding-left: 25px;
}
#nav{
width: 235px; …Run Code Online (Sandbox Code Playgroud)