html - ul-tag 内の li-tag 内の div には、予期しないストレッチ/サイズ変更動作があります

Question

このペンでの私の目標は、垂直方向と水平方向の中央に配置されたテキストを含むスタック div のようなものにすることでした。

灰色または赤/青の「スタック」を見ると、この目標に到達したことがわかります。しかし、今は癖があります。

グレーと赤/青のスタックの高さが縮小されるようにウィンドウのサイズを変更すると、グレーと赤/青のスタックの間に黒いギャップが生じることがあります (ボディの背景が黒であるため)。このギャップは、サイズを変更するポイントに応じてのみ表示されます。

この画像を見てください：ここに画像の説明を入力

赤/青のスタックの周りの div の高さは 24.50% で、これを内部の 7 つの領域で 100% と見なすので、この div 内の 7 つの「領域」のそれぞれの高さは14.20%です。

14.20 % の代わりに 100% / 7 = 14.28571428571429 % の値で試してみましたが、状況は良くなりません。

黒いギャップはまだそこにあります。

私box-sizing:border-box;はすべての html 要素に使用するため、使用可能な 24.50% を 7 領域で割ると、最新のクロムを使用するため、境界線またはパディングを含む各領域の高さが 3.50% というきれいな数値になります。

サイズを変更すると、なぜ黒いギャップがあるのかわかりませんか？

HTML

<div id="responseChart" style="height:100%;">
<div style="font-size:8px;;height:24.50%;">
  <ul class="Stack" style="height:100%;width:150px;float:left;"> 
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">1</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">2</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">3</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">4</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">5</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">6</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">7</div></li>
  </ul>
  <div class="dummy"></div>
  <div style="height:100%;width:100px;float:left;">
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
  </div>
  <div class="dummy"></div>
  <div style="height:100%;width:75px;float:left;">
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
  </div>
  <div class="dummy"></div>
</div>
<div style="background:darkred;height:1%;"></div>
<div style="height:74.50%;">
<div style="height:100%;" id="chartBody">
      <ul class="Stack" style="width:150px;">
        <li><div class="vertical-center horizontal-center" style="height:25%;">test1</div></li> 
        <li><div class="vertical-center horizontal-center" style="height:50%;">test2</div></li>
        <li><div class="vertical-center horizontal-center" style="height:25%;">test3</div></li>        
      </ul>
  <div class="dummy"></div>
      <div style="height:100%;width:100px;">
        <div style="height:100%;" >
          <div class="push-center diagram" style="background-color:#aa11cc;height:25%;">1</div>
          <div class="push-center diagram" style="background-color:#aa44cc;height:50%;">2</div>
          <div class="push-center diagram" style="background-color:#aa66cc;height:25%;">3</div>
        </div>       
      </div>   
      <div class="dummy"></div>  
      <div style="height:100%;width:75px;">
        <div style="height:100%;">
          <div class="push-center missingReplies" style="background-color:#fff;height:22%;">-1</div>
          <div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
          <div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
          <div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div>
        </div>        
      </div>  
    <div class="dummy"></div>  
    </div>
</div>
</div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, html{
    width:100%;
    height:100%;
padding:5px;  
  color:white;
  background:black;

}

*{ /* Every element which has a border or padding value puts this value inside the div */
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  padding:0;
  margin:0;
}

#chartBody{
  height:100%;
  background:darkgray;
}

.missingReplies{
  border-top: gray dashed 1px;
  border-left: gray dashed 1px;
  border-right: gray dashed 1px;  
}

.clear{
  clear:both;
}

.diagram
{
  color:white; 
  font-weight:bold;
  border-bottom:white solid 1px;
}

#chartBody > div  {
  height:100%;  
  float:left;
}
.dummy{
  float:left;
  background:grey;
  height:100%;
  width:30px;

}
.Stack {
    display: table;
    height: 100%;
    float: left;
}

    .Stack li {
        list-style: none;
        display: table-row;
    }

        .Stack li div {
            display: table-cell;
        }

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

score 0 · Accepted Answer

display:table-row;for<li>とdisplay:table;forを使用している場合、高<ul>さをに設定する必要はありません<li>。親タグ (この場合は<ul>) の高さが子タグ (この場合は ) の間で分割されます<li>。このデモを見てください

詳細については、http://linuxandfriends.com/how-to-style-div-elements-as-tables/を参照してください。

html - ul-tag 内の li-tag 内の div には、予期しないストレッチ/サイズ変更動作があります

1 に答える 1

Related

Reference