Question

我想知道是否有一种方法可以设置x（未知）百分比量的css，例如height: *%;？如果不可能，如何使其占用屏幕其余部分的大小？

我尝试了http://jsfiddle.net/omarjuvera/xnau2wsL/和http://jsfiddle.net/omarjuvera/xnau2wsL/1/但是在这个小提琴中，这些div元素甚至没有达到所需的屏幕高度大小，更不用说整个屏幕一起使用的目标了。

HTML

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!</div>

CSS

#hello {
    border: solid black 2px;
    min-height: 10%;
}
#shout {
    border: solid brown 2px;
    /*inherit height from content*/
}
#world {
    border: solid blue 4px;
    height: *;
}

顺便说一句，我不想设置像素和溢出的高度，因为我想要一个移动友好（RWD）css

备注

#hello的高度已知10%媒体（屏幕）尺寸
#shout的高度大小未知（继承自内容）
#world的高度尺寸是媒体的其余部分（x%）
可以在不改变语义的情况下完成吗？ - 容器或更改，只是css

Answer 1

为了让div使用百分比达到高度，div周围的容器必须在css中设置一个高度：http://jsfiddle.net/xwyg89jk/

如果容器是body标签，您可以设置：

html {
height: 100%;
}

body {
height: 100%;
}

Answer 2

百分比基于父亲的身高，因此您必须拥有身高的父母。

您需要在包装器上添加height: 100%; position: absolute;：

＆＃13;

#hello {
    border: solid black 2px;
    min-height: 10%;
}
#shout {
    border: solid brown 2px;
}
#world {
    border: solid blue 4px;
    height: 70%;

}
#wrap{
    height: 100%;
    position: absolute;
}

＆＃13;

<div id="wrap">
    <h1>Size and unit % wildcard</h1>
    <div id="hello">Hello</div>
    <div id="world">world</div>
    <div id="shout">!</div>
</div>

＆＃13;

Answer 3

显示：表格可以：

＆＃13;

html,body {
  height:100%;
  width:100%;
  }
body {
  display:table;
  border-collapse:collapse;
  margin:0;
  box-sizing:border-box;
  }
body>div {
display:table-row;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  }
#shout:hover {
  height:15%;
  }
#shout {
  height:1%;
  border:red solid;
  }

＆＃13;

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!,hover me to make me grow</div>

＆＃13;

或更好的显示：flex;

＆＃13;

html,body {
  height:100%;
  }
body {
  display:flex;
  flex-direction:column;
  margin:0;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  flex:1
  }
#shout { 
;
  border:red solid;
  }
#shout:hover {
  height:25%;
  }

＆＃13;

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!, hover me to make me grow</div>

＆＃13;

CSS：大小元素高度为屏幕的x％

3 个答案: