1. 首頁
  2. 問答
  3. 如何使背景div不計入可滾動區域

如何使背景div不計入可滾動區域

2014-06-12 81 views
0

我有一種情況，我需要創建一個更寬的div元素由另一個div定義的視口。如果嘗試改變邊界，填充和各種divs的餘量，沒有多少運氣。如何使背景div不計入可滾動區域

這裏的CSS：

#page_content { 
    width:200px; 
} 

#content_container { 
    overflow-y: auto; 
    background-color:#999999; 
} 

#content_inner { 
    padding:20px; 
}

和HTML

<div id="page_content"> 
    <div id="content_container"> 
     <div id="content_inner"> 
      <div style="height: 100px; width: 200px; background-color:#ff0000;"> 
       <div style="height: 10px; width: 500px; background-color:#ffff00;"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

JSFiddle

我想什麼是可滾動區域被限制爲20px過去的紅格，但黃色div需要比視口寬一點點

來源

2014-06-12 Graeme

+0

像這樣http://jsfiddle.net/視口的div隱藏溢出具有較大內容的div gBfdZ/2 /？ – Huangism

+0

我應該提到我需要內部div來滾動... – Graeme

+0

我迷路了，你試圖達到的最終結果是什麼？ – Huangism

回答

0

我使用這個在我的項目，我創建了一個CSS這樣

div.scrolled { 
    width: 1150px; 
    height: 620px; 
    overflow-y: scroll; 
}

，並在我的HTML文件，我只認我想介紹到我的div什麼區域，我這樣做

div class="scrolled"> 
    <table> 
    <thead> 
     <tr> 
     </tr> 
    </thead> 
    </table> 
</div>

，你將有你在滾動 'Y' 對齊，希望我幫你

來源

2014-06-12 13:50:50 MickyScion

+0

我需要內部和外部div滾動，但僅限於外部div的範圍。內部div的內容需要在可滾動區域之外進行渲染。 – Graeme

+0

好在你的代碼似乎是你想要一個包含你的「content_inner」的可滾動區域，因爲在你的css中這個內部沒有溢出......如果你想添加到內部滾動你只有添加溢出，因爲它有類滾動（如我的例子）...我將銘記你的問題，評論它是如何去... – MickyScion

0

我想通了:)

CSS

#page_content { 
    width: 200px; 
    height: 200px; 
    margin:auto; 
} 

#content_container { 
    overflow-y: auto; 
    overflow-x: auto; 
    background-color:#ffffff; 
} 

#content_inner { 
    width: 200px; 
    height: 200px; 
} 

.hex-row { 
    margin-left: 17px; 
    height: 50px; 
    clear: left; 
} 

.hex-wrapper { 
    text-align: center; 
    float: left; 
    position: relative; 
    width: 30px; 
    height: 50px; 
    line-height: 50px; 
    margin-right: 17px; 
    margin-bottom: -24px; 
} 

.hex-wrapper.even { 
    margin-top: 27px; 
} 

.hex { 
    vertical-align: middle; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 30px; 
    height: 50px; 
    background: #114781; 
} 

.hex:before, .hex:after{ 
    vertical-align: middle; 
    content: " "; 
    position: absolute; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
} 

.hex:before { 
    left: -15px; 
    border-right: 15px solid #114781; 
} 

.hex:after { 
    right: -15px; 
    border-left: 15px solid #114781; 
}

HTML

<div id="page_content"> 
    <div id="content_container"> 
     <div id="content_inner"> 
      <div style="width: 250px; height: 300px; background-color:#ff0000;"> 
       <div style="width: 280px; height: 300px; margin-top: -50px; margin-left: -30px; overflow-x: hidden; overflow-y: hidden;"> 
        <div style="height: 750; overflow-y: visible;"> 
         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 

         <div class="hex-row" style="width: 550px; overflow-x: visible;"> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
          <div class="hex-wrapper"><div class="hex"></div></div> 
          <div class="hex-wrapper even"><div class="hex"></div></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Fiddle

訣竅是創建內部有明顯的溢出

來源

2014-06-13 02:35:41 Graeme

相關問題

 相關問題