Question

您好我为“后端”-Solution创建了一个简单的模板。它看起来有点像：

<div id="topnavi"></div>
<div id="mainnavi"></div>
<div id="content"></div>

*{
  margin:0;
  padding:0;
}

body {
  background-color:#FCFCFC;
}

#topnavi {
  width:100%;
  height:55px;
  background-image:url('randomurl');
  background-repeat:repeat-x;
  margin-bottom:1px;
}

#mainnavi {
  width:200px;
  display:table-cell;
  background-color:#333333;
}

#content {
  display:table-cell;
}

所以在TOP上有一个导航栏，带有徽标和东西，设置在55px高度（底部+ 1px边距）。现在我希望sidenavigation采用100％的浏览器窗口（不滚动），但如果我设置 * {高度：100％} #mainnavi {100％} 我得到一个滚动条，因为来自topnavi的55 + 1px（至少这是我猜的）。我可以先设置#mainnavi的东西，然后将#topnavi设置为position：absolute并让它覆盖它 - 但这对我来说是一个肮脏的解决方案......还有其他任何有用的工作吗？< / p>

Answer 1

试试这个：

#mainnavi{height:calc(100% - 56px);}

Answer 2

您可以使用CSS3中的calc，但它会扩展到页面高度。如果您想将其缩放到屏幕尺寸，可以添加position: absolute

示例：http://jsfiddle.net/fywZT/

Answer 3

如果您的浏览器支持，CR指令绝对是一个解决方案。无论如何，我在过去发现了一些问题（例如，Safari 5不支持它等问题）。您是否尝试过更改box-sizing属性？类似的东西：

-moz-box-sizing: border-box

我在这里留下一个链接，供您了解更多相关信息 - http://www.w3schools.com/css/css_boxmodel.asp

DIV身高：100％ - 55 + 1px？

3 个答案: