Question

我无法将以下元素扩展到100％。

如果我没有那里的文字。它们根本不可见。不完全确定为什么会这样。

看看FIDDLE

HTML

<figure class="left clearfix">LEFT</figure>
<figure class="middle">MID</figure>
<figure class="right clearfix">RIGHT</figure>

CSS

    html body figure.left {
    position: relative;

    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);

    height: 100%;
    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: gray; 
}

    html body figure.right {
    position: relative;

    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);

    height: 100%;
    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: orange;   
}

    html body figure.middle {
    position: relative;

    width: 40px;
    height: 100%;

    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: black;
}

感谢。

Answer 1

为网格容器定义“高度”

html body div.grid-container {
  width: 100%;
  height: 20px; //a height value to your grid container
  padding: 0;
  margin: auto;
  clear: none;
  float: none;
  margin: auto;
}

你所需要的只是定义身高：继承; “html body figure.left {}”和“html body figure.right {}”

Answer 2

请尝试此操作（http://jsfiddle.net/3MRt6/）

html, body, div.grid-container {
width: 100%;
    height: 100%;
padding: 0;
margin: auto;
clear: none;
float: none;
margin: auto;
}

figure.left {
position: relative;

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

height: 100%;
margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: gray; 
}

figure.right {
position: relative;

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

height: 100%;
margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: orange;   
}

 figure.middle {
position: relative;

width: 40px;
height: 100%;

margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: black;
}

身高：100％;不会工作

2 个答案: