CSS：在使用最小宽度时浮动DIV内容溢出容器。宁可有滚动

希望你的一个人会知道这个答案。CSS：在使用最小宽度时浮动DIV内容溢出容器。宁可有滚动

我有2浮动DIVS和一个DIV容器内容有最小宽度。当我调整窗口和窗口的大小比最小宽度内容小时，内容溢出父容器。

我想父容器扩展到容纳，而不是有最小内容溢出，只需在浏览器的底部水平滚动。

任何人都知道解决方案吗？

<html> 
    <style> 
     .outer { 
      width:100%; 
      border:2px solid green; 
      position:relative; 
     } 
     .left { 
      float:left; 
      width:20%; 
      max-width:250px; 
      background:red; 
     } 
     .right { 
      float:left; 
      width:80%; 
      background:#eee; 
     } 
     .inner { 
      min-width:620px; 
      border:1px solid blue; 
     } 
     .clear { 
      clear:both; 
     } 
    </style> 
    <div class='outer'> 
     <div class='left'>This is an inner content page. This is an inner content page.This is an 
      inner content page.This is an inner content page.This is an inner content 
      page.This is an inner content page.This is an inner content page.This is 
      an inner content page.This is an inner content page.This is an inner content 
      page.This is an inner content page.This is an inner content page.</div> 
     <div 
     class='right'> 
      <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an 
       inner content page.This is an inner content page.This is an inner content 
       page.This is an inner content page.This is an inner content page.This is 
       an inner content page.This is an inner content page.This is an inner content 
       page.This is an inner content page.This is an inner content page.</div> 
      <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an 
       inner content page.This is an inner content page.This is an inner content 
       page.This is an inner content page.This is an inner content page.This is 
       an inner content page.This is an inner content page.This is an inner content 
       page.This is an inner content page.This is an inner content page.</div> 
    </div> 
    <div style='clear:both'></div> 
    </div>

想滚动条出现在水平方向的浏览器窗口（而不是DIV）扩展。

来源

2011-02-23 Scott Yu - Front-End UX

你想去哪里滚动条出现？例如，你可以在'.outer'上显示'overflow：auto'，但不知何故，我怀疑这正是你想要的。 – thirtydot 2011-02-23 22:14:11

我希望滚动条出现在浏览器的底部，而不是正确的父div的溢出。 – 2011-02-23 22:44:41

您正在将顶级父级的宽度设置为100％。它不会比它的父母变大，在这种情况下是body。如果要使.outer元素变大，可以指定固定宽度http://jsfiddle.net/ETcf2/。

随着那个和min-width删除浮动元素行为的预期。

来源

2011-02-23 22:14:59

尝试

.outer { 
    width:100%; 
    border:2px solid green; 
    position:relative; 
    overflow: scroll; 
}

来源

2011-02-23 22:15:26

无论如何，使滚动显示在浏览器的底部vs作为DIV的一部分？因为内容可能很长，并且如果scroll是DIV的一部分，如果内容需要向下滚动以查看水平滚动条，用户可能不会看到它。 – 2011-02-23 22:45:39

CSS：在使用最小宽度时浮动DIV内容溢出容器。宁可有滚动

回答

相关问题