Question

我有2个div需要可左右调整（并填充每个空间）。当div变得太小而不能满足其内容时，它们需要变得可滚动。我的问题是：当可调整大小的内容的宽度设置为例如。 canvas width ='200'，可调整大小的div不会调整小于画布的大小。这是小提琴：fiddle

我已经看过这里了： Making a div scrollable inside a resizeable container div

并包装另一个div：.inner围绕内容并将其设置为width：inherit

.inner{width:inherit;  }

    .pane {
    display: table-cell;
    width: auto;`enter code here`
    overflow:auto;
}
.left.pane {
   background-color: olivedrab; 
}


.right.pane {
    background-color: orange;  
}
canvas{width:200px ; border:solid 1px red}

我也尝试过以下操作，但只有当左窗格宽度不是“固定”时才会有效：

resize: function(e, ui) {
           var dif= ui.originalSize.width - ui.size.width;
            console.log(dif +'   '+ ui.originalSize.width);
          var oldWidth= $(".right.pane").width();
            $(".right.pane").width( oldWidth + dif);
        }

它也会对强烈反应，并且变得非常不愉快。

我认为我应该能够覆盖可调整大小不会调整大小小于内容的规则。（我无法调整内容的宽度，它们应该只是可滚动的）

我尝试了以下内容：但这不起作用

.inner{width:auto; min-width:inherit; max-width:inherit;  or 0% 100% respectively}

使左右div可调整大小也不起作用+留下不必要的间隙。

如何调整小于其内容的窗格，并使窗格可滚动。

非常感谢帮助。 Jenita

Answer 1

我让滚动条显示在两个div上：DEMO 我画了100％宽度的画布，并使div.left.pane成为.inner

的父级

HTML

<div class="wrapper">
<div class="header">
 header    
</div>
   <div class="inner-wrapper">
      <div class='left pane'> <div class="inner"><pre>  Left
 bla bla bla bla bla bla bla bla bla bla bla bla bal

  bla bla bla bla bla bla bla bla bla bla bla bla bal

  bla bla bla bla bla bla bla bla bla bla bla bla bal
  bla bla bla bla bla bla bla bla bla bla bla bla bal
           </pre>    
       </div> </div>

       <div class="right pane">Right
       <div class='inner'> 
           <canvas > </canvas>
       </div>
       </div> 
       </div>

      <div class="footer">
  Footer  
</div>   
</div>

CSS

.wrapper {
display: table;
 height:75%;
 width:90%;
    background-color: red;
}

.header {
    height: 5%;
    background-color: moccasin;  
}
.inner-wrapper{
display: table;
    overflow:auto;
width: 100%;
    height: 90%;
}

.pane {
    display: table-cell;
    width: auto;
    overflow:auto;
}
.left.pane {
   background-color: olivedrab; 
}
.inner{width:auto; min-width:inherit; max-width:inherit;}

.right.pane {
    background-color: orange;  
}
canvas{width:100% ; border:solid 1px red}
.footer {
    height: 5%;
    background-color: moccasin;  
}

可调整大小：调整小于内容的div并使其可滚动

1 个答案:

HTML

CSS