Question

我想我可能是寻找这个答案的1000人之一..但似乎没有人能够回答它。我有一个动态网站，我试图在另一个div中使用class = table-cell获得100％高度div。我实际上是尝试使用纯css创建翻转效果..而且td内的div isn'工作..

我在http://jsfiddle.net/RedEarthDesigns/uwXf6/3/

设置了一个JSFiddle

HTML

<div class="div-table">
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span>
        </div>
    </div>
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400, 300);
 body {
    margin:0;
    font-family:'Source Sans Pro', sans-serif;
    background-color:#111;
}
p {
    font-size:12px;
    color:#eee;
    line-height: 6px;
}
h1 {
    font-size:24px;
    color:#eee;
}
.div-table {
    display:table;
    width:100%;
    height:500px;
    padding:0;
    margin:0;
    border-collapse:collapse;
}
.div-row {
    display:table-row;
}
.div-td {
    display:table-cell;
    height:33%;
    width:20%;
    text-align:right;
    vertical-align:bottom;
    overflow:hidden;
}
.hidden span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    transform:translate(9999px);
    opacity:0;
}
.hidden:hover span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    display:block;
    transform:translate(0);
    opacity:1;
}
.venue {
    background-image:url(http://www.indpg.com.au/img/norman.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
}
.div-td:hover {
    background-image:none;
}

任何帮助将不胜感激..

Answer 1

您最好的选择是使用内联块元素和box-size：border box属性，imho。

 <div class="wrapper">
  <div class="row">some content</div>
  <div class="row">some content</div>
</div>

和css

 body, html {height:100%;}
.wrapper {height:100%;box-sizing:border-box;background:black;}
.row {background:red;display:inline-block;width:30%;height:100%;}

box-sizing: border-box在这种布局中解决了许多问题，并使其他所有需求变得更容易实现。

jsfiddle中的

Here's a sample

Answer 2

OK！所以@DanielPerván回答了这个问题，并在http://jsfiddle.net/uwXf6/4/

处建立了一个JSFiddle

<强> HTML

<div class="div-table">
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span>
        </div>
    </div>
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span>
        </div>
    </div>
</div>

<强> CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400, 300);
 body {
    margin:0;
    font-family:'Source Sans Pro', sans-serif;
    background-color:#111;
}
p {
    font-size:12px;
    color:#eee;
    line-height: 6px;
}
h1 {
    font-size:24px;
    color:#eee;
}
.div-table {
    display:table;
    width:100%;
    height:500px;
    padding:0;
    margin:0;
    border-collapse:collapse;
}
.div-row {
    display:table-row;
}
.div-td {
    display:table-cell;
    height:33%;
    width:20%;
    text-align:right;
    vertical-align:bottom;
    overflow:hidden;
}
.hidden span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    -webkit-transform:translate(500px);
    -moz-transform:translate(500px);
    transform:translate(500px);
    opacity:0;
    display:block;
    -webkit-transition: -webkit-transform .5s, opacity 1s;
    -moz-transition: -moz-transform .5s, opacity 1s;
    transition: transform .5s, opacity 1s;
}
.hidden:hover span {
    height:100%;
    min-height:100%;
    width:auto;
    vertical-align:text-bottom;
    padding:10px;
    -webkit-transform:translate(0);
    -moz-transform:translate(0);
    transform:translate(0);
    opacity:1;
}
.venue {
    background-image:url(http://www.indpg.com.au/img/norman.jpg);
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
}
.div-td:hover {
    background-image:none;
}

.hidden {
     height: 100%;   
}

完美的作品！真棒!!!

动态网站CSS滚动 - DIV内部的100％DIV高度，CSS显示= table-cell

2 个答案: