爲什麼我的一些div元素被水平切割？

我發現一些（我認爲）是相當奇怪的行爲。把這個代碼：爲什麼我的一些div元素被水平切割？

<body style="background-color:#1b1b1b"> 
    <div style="width:100%;height:1px;background-color:#f00" /><br /> 
    <div style="width:1300px;height:300px;background-color:#fff;margin: 0 auto;" /> 
</body>

我沒有一直在做Web開發時間不長，但我會一直以爲，首先div將永遠是頁面的整個寬度，無論多大的大小調整我做到瀏覽器窗口。但是，當我重新調整瀏覽器窗口的寬度以使其小於較低的寬度div（1300px）並滾動時，應該是width:100%的上部div似乎被切斷。我錄的這種行爲：（它遺憾沒有被嵌入，似乎gifv文件格式，此處不支持）

http://i.imgur.com/5bFIj0O.gifv

任何建議對這個問題（這可能是一個簡單了很多，我認爲）？

來源

2017-03-18 carefulnow1

與'寬度DIV：100％'將是含有100％元素，它是'body'。默認情況下，'body'的寬度將與視口的寬度相匹配。所以'body'只和你的viewport一樣寬，那麼'width：100％'的div將是相同的寬度，而'width：1300px'的內部div在這兩者之外溢出。這就是爲什麼紅線在視口寬度處切斷的原因。如果您將'overflow：hidden'添加到'body'或div的寬度爲100％，則您不會看到1300px寬的div溢出。 –

如果我需要水平滾動，該怎麼辦？假設有更低的'div'內容。 – carefulnow1

你究竟想要做什麼？如果上面的div應該只是一條線，您可以改爲向父級添加border-top屬性（在您的示例中）。 – Tacud

與寬度的div：100％將是包含元素的100％，這是body。默認情況下，主體的寬度將與視口的寬度相匹配。所以body只和你的viewport一樣寬，那麼div寬度爲100％的寬度就是這個寬度，內部寬度爲1300px的div在這兩個外面溢出。這就是爲什麼紅線在視口寬度處切斷的原因。如果您添加了overflow：隱藏到寬度爲100％的body或div中，您將不會看到1300px寬div的溢出。

如果你想有一個水平滾動，你可以添加overflow-x: scroll;到div與width: 100%;

<body style="background-color:#1b1b1b"> 
 
    <div style="width:100%;border-top: 1px solid #f00;padding-top: 1em; overflow-x: scroll;"> 
 
    <div style="width:1300px;height:300px;background-color:#fff;margin:auto;">foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo </div> 
 
    </div> 
 
</body>

來源

2017-03-18 16:39:17

爲什麼我的一些div元素被水平切割？

回答

相關問題