Question

我在使用CSS Scaled <div>时遇到了一些困难。

我的外部<div>已固定width和height，内部<div>应与流量一致。问题是，即使我缩小内部<div>（向下，让我们说0.3），外部<div>上的垂直滚动条仍然可见，并且＆和＃39; s真的出乎意料（检查内部<div>显示它比它的父亲小一些）。我真的认为外部<div>应该没有滚动条，除非内部<div>溢出。

CODE

<div class="outter">
<div class="inner">
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
</div>

.outter {
    overflow: auto;
    width: 300px;

    box-shadow: 0 0 2px #222;
}

.inner {
    font-size: 40px;
    transform-origin: top left;
    transform: scale(1.3);
    height: 200px;
}

我应该提一下，我有一个<div>，<svg>和<img>没有<canvas>属性，而不是内心font-size的孩子， width和height s根据比例因子而变化。

这是我问题的demo。

Answer 1

只需将display:flex;添加到课程.outter即可。以下两个示例：第一个包含正常内容，没有滚动条不会溢出，第二个示例包含溢出内容，但现在使用垂直滚动条。在两个例子中，css都是一样的！

正常内容

＆＃13;

.outter {
  box-shadow:0 0 2px #222;
  display:flex;
  height:200px;
  overflow-y:auto;
  width:300px;
}

.inner {
  font-size:40px;
  transform-origin:top left;
  transform:scale(0.3);
  -webkit-transform:scale(0.3);
}

＆＃13;

<div class="outter">
  <div class="inner"> 
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
  </div>
</div>

＆＃13;

溢出内容

＆＃13;

.outter {
  box-shadow:0 0 2px #222;
  display:flex;
  height:200px;
  overflow-y:auto;
  width:300px;
}

.inner {
  font-size:40px;
  transform-origin:top left;
  transform:scale(0.3);
  -webkit-transform:scale(0.3);
}

＆＃13;

<div class="outter">
  <div class="inner"> 
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
  </div>
</div>

＆＃13;

Answer 2

以下是您的问题的解决方案

.outter {
    overflow: auto;
    width: 300px;
    box-shadow: 0 0 2px #222;
}

.inner {
    font-size: 40px;
    transform-origin: top left;
    transform: scale(0.3);
    height:200px;
}

只需从outter类中删除height属性并将其放入内部类

Answer 3

您的身高溢出由font-size:40px计算。然后你transform它，但高度仍然与40px字体相同。

这就是发生这种情况的原因。

Answer 4

添加内部div并提供height。

.outter {
overflow: auto;
width: 300px;
height: 200px;
box-shadow: 0 0 2px #222;
}
.wrap {
height: 160px;
}
.inner {
font-size: 40px;
transform-origin: top left;
transform: scale(0.3);
}

<div class="outter">
<div class="wrap">
    <div class="inner">
        <p>Random</p>
        <div>Silly</div>
        <h2>Thing</h2>
    </div>
</div>
</div>

Answer 5

使用

 this is   x.txt 
 file     
    12=aa
    1234=ytuu
    157=lkjh

    // above is the sample of data(from 7700 similiar lines in actual file) in a txt file . i want to use that data for condition checking in my java code like 

    if (n==12){
     System.out.println("aa");}
    else
    if (n==1234){
     System.out.println("ytuu");}

外部div上的

和

position:absolute;

内部div上的

请参阅working fiddle

我刚刚添加了上面提到的属性：不需要的滚动条消失了。

您可能想要尝试取消注释position:relative;段落 - 我为了测试目的而添加为评论的HTML - 以便在需要时看到滚动条。

即使内容较小，HTML <div>仍然会溢出

5 个答案: