1
高さ100％の行を作りたいと思います。ただし、行は100％の高さでは行えません（固定高さpxでのみ動作します）。どのように私は100％に合わせて行を作るために行うことができますか？ （なぜなら、私はword_containerを100％の行の高さで縦と横の中央に配置したいからです）。ここでCSSが100％の高さで行があります
/* Grid */
.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row > * {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row:after, .row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform > * > :first-child {
margin-top: 0;
}
.row.uniform > * > :last-child {
margin-bottom: 0;
}
.row.\30 \25 > * {
padding: 0 0 0 0px;
}
.row.\30 \25 {
margin: 0 0 -1px 0px;
}
.row.uniform.\30 \25 > * {
padding: 0px 0 0 0px;
}
.row.uniform.\30 \25 {
margin: 0px 0 -1px 0px;
}
.row > * {
padding: 0 0 0 40px;
}
.row {
margin: 0 0 -1px -40px;
}
.row.uniform > * {
padding: 40px 0 0 40px;
}
.row.uniform {
margin: -40px 0 -1px -40px;
}
.row.\32 00\25 > * {
padding: 0 0 0 80px;
}
.row.\32 00\25 {
margin: 0 0 -1px -80px;
}
.row.uniform.\32 00\25 > * {
padding: 80px 0 0 80px;
}
.row.uniform.\32 00\25 {
margin: -80px 0 -1px -80px;
}
.row.\31 50\25 > * {
padding: 0 0 0 60px;
}
.row.\31 50\25 {
margin: 0 0 -1px -60px;
}
.row.uniform.\31 50\25 > * {
padding: 60px 0 0 60px;
}
.row.uniform.\31 50\25 {
margin: -60px 0 -1px -60px;
}
.row.\35 0\25 > * {
padding: 0 0 0 20px;
}
.row.\35 0\25 {
margin: 0 0 -1px -20px;
}
.row.uniform.\35 0\25 > * {
padding: 20px 0 0 20px;
}
.row.uniform.\35 0\25 {
margin: -20px 0 -1px -20px;
}
.row.\32 5\25 > * {
padding: 0 0 0 10px;
}
.row.\32 5\25 {
margin: 0 0 -1px -10px;
}
.row.uniform.\32 5\25 > * {
padding: 10px 0 0 10px;
}
.row.uniform.\32 5\25 {
margin: -10px 0 -1px -10px;
}
.\31 2u, .\31 2u\24 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u, .\31 1u\24 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u, .\31 0u\24 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u, .\39 u\24 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u, .\38 u\24 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u, .\37 u\24 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u, .\36 u\24 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u, .\35 u\24 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u, .\34 u\24 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u, .\32 u\24 {
width: 20%;
clear: none;
margin-left: 0;
}
.\31 u, .\31 u\24 {
width:14.28%;
clear: none;
margin-left: 0;
}
.\31 2u\24 + *,
.\31 1u\24 + *,
.\31 0u\24 + *,
.\39 u\24 + *,
.\38 u\24 + *,
.\37 u\24 + *,
.\36 u\24 + *,
.\35 u\24 + *,
.\34 u\24 + *,
.\33 u\24 + *,
.\32 u\24 + *,
.\31 u\24 + * {
clear: left;
}
.\-11u {
margin-left: 91.66667%;
}
.\-10u {
margin-left: 83.33333%;
}
.\-9u {
margin-left: 75%;
}
.\-8u {
margin-left: 66.66667%;
}
.\-7u {
margin-left: 58.33333%;
}
.\-6u {
margin-left: 50%;
}
.\-5u {
margin-left: 41.66667%;
}
.\-4u {
margin-left: 33.33333%;
}
.\-3u {
margin-left: 25%;
}
.\-2u {
margin-left: 16.66667%;
}
.\-1u {
margin-left: 8.33333%;
}
html,body{
height:100%;
min-height:100%;
padding:0;
margin:0;
}
#row1{
border:1px solid red
height:0%;
margin:0;
padding:0;
}
.word_position{
}
.word_container {
width: 100%;
text-align: center;
position: absolute;
left: 48%;
top: 50%;
/*width: auto;*/
margin: 0px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}<div id="main">
<div id="row1" class="row">
<div class="6u 12u(mobile)">
<div class="picture">
<figure>
</figure>
</div>
</div>
<div class="6u 12u(mobile)">
<div class="word_position">
<div class="word_container">
<h1>12312342342442342sdsdf3</h1>
</div>
</div>
</div>
</div>
</div>
可能な複製を動作するはずです質問/ 1575141/make-div-100-browser-window-height-of-window）と、SOを検索して得られた多数の同様の回答があります。 – Rob