簡體   English   中英

為什么身高:calc(100% - 100px)不起作用

[英]why height: calc(100% - 100px) is not working

JsFiddle我試圖將測試div的高度設置為calc(100%-100px)。 為什么它不起作用。

.test {
  height: calc(100%-100px);
 }

運算符+-需要前后的空格。 嘗試calc(100% - 100px). 使用*運算符,您不需要前面的空格。 calc(100%(1/15))

你可以使用100vh而不是100%。 vh =視口高度的1%。

.test {
  height: calc(100vh - 100px);
}

為什么#wrap有多種height css樣式?

嘗試起飛height: auto !important;

http://jsfiddle.net/UaYfW/53/

下面的代碼將幫助您修復div的高度.div {height:calc(100% - (20px + 30px));}工作代碼如下:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

HTML代碼:

<header>Some nav stuff here</header>

<h1>This is the heading</h1>

<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

工作示例: http//jsfiddle.net/UF3mb/603/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM