我正在使用的Less编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译
body { width: calc(100% - 250px - 1.5em); }
成
body { width: calc(-151.5%); }
这显然是不希望的.我想知道是否有办法向Less编译器发出信号,在编译期间基本上忽略该属性.我搜索了Less文档和两个编译器的文档,但我找不到任何东西.
Less或less编译器是否支持此功能？
如果没有,是否有一个CSS扩展器呢？
我想为管理面板创建一个布局,但我不知道如何将#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>
的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; …我了解了CSS函数calc()及其真棒.我尝试使用它像:
#abc{width:calc(100%-20px)}
但是这个功能的问题在于它不起作用.我测试了这个代码IE9和Safari,它没有用.
为什么不起作用？
我已经在最新版本的Firefox,Chrome,IE 11中对它进行了测试.在这些浏览器中,当您使用CSS calc()函数计算时,它都不起作用width.据我所知,我已正确应用它.作为参考,您可能想要检查
为什么这不起作用？
div {
background-color: blue;
height: 50px;
width: calc(100%-250px);
}<div></div>演示:
是的,这个问题在许多编辑过程中发展成为重复,但我仍然认为这应该保留在这里,因为它比例如CSS calc()不能正常工作更好地说明问题.此外,imho的答案要好得多.
谁能告诉我为什么这个CSS calc函数不起作用？当我检查Chrome上的元素时,它会显示"无效的属性值".
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
我正在尝试使用calc()CSS 创建一个简单的文本滑块，但它不起作用。
为了展示它应该如何工作，我另外添加了正确的值
\n\n编辑：
\n我已经编辑了代码，现在应该不再包含错误，但它仍然不起作用。
\ncalc() 中的 100% 似乎指的是父元素。
\n我该如何解决这个问题？
.box {\r\n width: 200px;\r\n height: 30px;\r\n line-height: 30px;\r\n font-family: arial;\r\n font-weight: bold;\r\n color: #FFF;\r\n background: #000;\r\n overflow: hidden;\r\n cursor: default;\r\n -moz-user-sselect: none;\r\n -webkit-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.text {\r\n white-space: nowrap;\r\n float: left;\r\n padding: 0 7px;\r\n box-sizing: border-box;\r\n transition: margin 0.5s linear;\r\n background: #404040;\r\n}\r\n\r\n.a:hover {\r\n transition: margin 2s linear;\r\n margin: 0 0 0 -90.25px;\r\n}\r\n\r\n.b:hover {\r\n transition: margin 2s linear;\r\n margin: 0 0 0 …