0

左側に固定幅のバナーがある 2 列のフルスクリーン マガジン ビューアーを作成しようとしています。右側の列が応答します。

display:table; の活用 私が作成した方法は次のとおりです。

http://jsfiddle.net/pouncebounce/pTeBP/2/

HTML

<div class="tbl_con">
   <div class="tbl_row">
      <div class="tbl_cell" id="banner">
      </div>
      <div class="tbl_cell" id="publication">
      </div>
   </div>
</div>
<script>
   var viewer = new com.zmags.api.Viewer();
   viewer.setPublicationID("b129d2b8");
   viewer.setParentElementID("publication");
   viewer.show();
</script>

CSS

* {
margin: 0;
padding: 0;
border: none;
}

html, body {
height: 100%;
width: 100%;
overflow: hidden;
}

.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;  
}

#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}

#publication {
width: *;
background-color: #FFAB1E;
}

これは最新バージョンの IE と Chrome では正しく表示されますが、100% の高さまたは実際の雑誌がまったく表示されない Firefox では正しく表示されません。何か理由は？

4

1 に答える 1

1

に変更*heightしheightて削除しmin-heightます。

必ず IE7 でテストしてください。ただし、動作するはずです。

于 2013-10-18T12:51:56.673 に答える