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內容溢出容器。寧可有滾動

回答

相關問題