水平滾動和切DIV

我有一個頂級的酒吧把我的博客：水平滾動和切DIV

<nav class="top-bar blog"> 
    STACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOW 
</nav> 

<style type="text/css"> 
    .top-bar.blog { 
     width: 100%; 
     white-space: no-wrap; 
     background: violet; 
     ... 
    } 
    body { 
     background: black; 
    } 
</style>

當我調整我的瀏覽器窗口小尺寸看單槓我得到這個：

enter image description here

這是預期的結果。

當我水平滾動這裏的右邊是結果：

enter image description here

股利被切斷。

奇怪的是，在stackoverflow.com的頂欄上存在同樣的問題。

如何防止這種情況發生，以便大小可以保持調整到窗口的正確部分而不是「剪切」？

enter image description here

來源

2013-08-06 Ydhem

你試過CSS聲明'寬度：自動; overflow-x：visible;'？ – collapsar

請參閱我的評論：http://stackoverflow.com/questions/18070415/horizontal-scroll-and-cuted-div/18070461?noredirect=1#comment26445025_18070461 – Ydhem

This對我的作品。

設置overflow:hiddenwidth:100%然後只是一些paddding和margin。

來源

2013-08-06 01:34:53

內容只能通過完全拉伸窗口看到對。這不是我想要的，我有一個靜態內容，應該顯示爲頂部欄。 – Ydhem

對不起，我不確定我是否理解。而且，這個視圖應該是靜態的。這只是JSFiddle只有4個不同的視圖，所以它看起來很奇怪。你想要做什麼，你只是想要沒有奇怪滾動問題的頂欄？如果是這樣的話，試着拿出你所有的CSS，並從寬度，邊距，填充和背景開始。然後開始添加屬性1，直到找到問題。 – 2013-08-06 02:04:21

如果您不希望頂欄移動，您可以嘗試position: fixed，刪除寬度並設置頂部，左側和右側位置。例如： -

.top-bar.blog { 
    position: fixed; 
    top: 5px; 
    left: 5px; 
    right: 5px; 
    height: 50px; 
    white-space: no-wrap; 
    background: violet; 
    overflow: hidden; 
}

更改頂部，左，右，以及任何你想要的高度數字。

來源

2013-08-06 01:46:10

-1

如果您想報頭滾動到權利，沒有通過窗口被修剪，然後設置爲頭一個固定的寬度：

header{width:1000px;}

fiddle demo

，如果你想讓它與擴大窗口，則任一組的相對寬度或使用絕對定位：

header{width:100%;}

fiddle demo

header{position:absolute;left:0;right:0;}

fiddle demo

來源

2013-08-06 01:54:53 lukeocom

水平滾動和切DIV

回答

相關問題