0

我的钢笔：

http://codepen.io/helloworld/pen/zvGgt

当您垂直调整窗口大小以缩小垂直堆叠的 div 时，div 内内容的字体大小对于单个 div 来说太小，因此整个 div 堆栈垂直溢出。

我想在堆栈上使用字体大小百分比，所以当浏览器窗口调整大小时，字体大小会减小，所以我除了堆栈不会溢出之外，因为 div 仍有空间缩小。

当我只希望我的堆栈使用字体大小百分比而不是 html 页面的其余部分时，在我的情况下，最好的方法是什么。

您在哪里声明了什么，请提供一个解决方案，您可以修改我的示例作为基础，以便我理解它，谢谢。

看看这张图片：我的问题是文本“7”无法再阅读，所以我必须缩小/缩小文本......

在此处输入图像描述

CSS

body, html {
    width: 100%;
    height: 100%;   
    font-family: arial;
    /*overflow: hidden;*/
}

* { /* 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;
}

._Z {
    width: 12.50%;
}

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

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

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

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

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

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

#responseView {
    height: 100%;
}

HTML

<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
        <div style="height: 100%;"> 
           <ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">

             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">11</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">22</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">33</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">44</div>
                </li>
                <li style="height:14.2%;background: yellow; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">55</div>
                </li>
              <li style="height:14.2%;background: orange; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">33</div>
                </li>
              <li style="height:14.2%;background: green; color: black;">
                    <div style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">66</div>
                </li>

            </ul> 

        </div>       
   </div>
4

0 回答 0