CSS: высота элемента размера до x% экрана

Question

Я хотел бы знать, есть ли способ установить css с x (неизвестным) процентным количеством, например 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

делает дисплей: таблица будет делать:

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; 
 
    }

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

или лучше дисплей: flex;

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%; 
 
    }

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

Answer 2

Для того, чтобы иметь дивы взять на высоту, используя процент, контейнер, окружающий дивы должен иметь набор высоты в CSS: http://jsfiddle.net/xwyg89jk/

Если контейнер является тег тела, вы можете установить:

html { 
height: 100%; 
} 

body { 
height: 100%; 
} 

Answer 3

процент базы на высоте родителя, так что вы должны иметь родителя с высоты.

Вам нужно добавить height: 100%; position: absolute; на обертке:

#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; 
 
}

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