HTML/CSS - 當內容創建水平滾動條時，如何修剪寬度：100％截斷？

我找了一個解決方案，並從未找到一個。也許我只是不夠努力，但我嘗試過的一切都不起作用。這個問題一直困擾着我，我從來沒有能夠修復它。當我試圖讓一個div或者其他元素佔用100％的頁面寬度的發生HTML/CSS - 當內容創建水平滾動條時，如何修剪寬度：100％截斷？

我的問題。該頁面上的內容容器是960像素。當我在全屏瀏覽器中時，沒有問題，但是當我將瀏覽器窗口大小調整爲小於內容寬度時，它會創建水平滾動不良，並且100％的元素不會保留其100％的寬度，從而創建一個截止點。

下面是示例頁面：http://www.yenrac.net/

有誰知道如何解決這一問題？這種情況下的元素是網站頂部的紅色標題橫幅。

HTML（其實是有點PHP的WordPress）：

<body> 
<div class="header"> 
    <div class="clearfix" id="header"> 
    <h1><?php bloginfo('name'); ?></h1> 
    <h3>A Spooky Site</h3> 

    </div> 
</div>

CSS：

body { 
    margin: 0px; 
} 

.header { 
    height: 100px; 
    width: 100%; 
    background: #8f2525; 
    color: #fff; 
} 

.clearfix { 
    width: 960px; 
    height: 100px; 
    margin: 0 auto; 
} 

.clearfix h1 { 
    margin: 0px; 
    padding: 15px 0px 0px 10px; 
    color: #fff; 
} 

.clearfix h3 { 
    margin: 0px; 
    padding: 0px 10px; 
}

放大到足以使內容超出邊界時，這種影響也會發生您的瀏覽器窗口/視口。

來源

2016-11-13 user3634781

請在問題中提供一些代碼。發佈鏈接到託管頁面並不是一個很好的方法來問一個問題 – Chris

克里斯說 - - 也在你的網頁 - 限制你正在使用的H1 - 語義上你應該只有一個h1接着是h2的等 - 沒有跳過對一個h3 ....在HTML5元素中，如章節，它在語義上是正確的，每個元素只有一個H1，但在這個鏈接頁面中並不是這樣。如果您使用HTML5文檔類型 - 您可以使用HTML5元素，例如

而不是 – gavgrif

我在源代碼中進行了編輯。這實際上是我第一次使用HTML5（主要是用它來測試媒體），我不知道這些。感謝您的提示！ – user3634781

首先，不使用clearfix類這樣的。它有一個specific common use，你以後只會混淆你自己和其他人。

你clearfix寬度爲960像素。其母公司header設置爲100％寬度。 header將與頁面大小一致。 clearfix將始終爲960px，無論頁面寬度或父寬度如何，因爲這是您設置的方式。

取決於你想要什麼，有幾種解決方案：

集width:100%上clearfix，而不是width:960px
上clearfix
設置max-width:100%從clearfix

基於刪除width:960px在你的其他意見，你可能LY要選擇2

來源

2016-11-13 09:33:36 Ouroborus

我認爲使用這些.clearfix的東西與我所要求的東西不正確地混淆。我試圖做的是有一箇中心框，將包含標題內容，如網站標題。這樣我可以將它對齊到以背景100％寬度橫幅頂部爲中心的960像素寬框的左側。這已經可行了，但問題在於，當窗口縮小或分辨率太低而無法包含所有內容時，背景橫幅不會填滿頁面的整個寬度。 – user3634781

如果您訪問示例網站並將瀏覽器對準屏幕右側並向右滾動，它可能有助於更好地解釋我所尋找的內容。我不關心這些內容是否有滾動條，因爲我還沒有考慮使用響應性，而是讓標題的背景橫幅完全覆蓋，而不是在滾動時切斷。 – user3634781

@ user3634781是的，除了你已經擁有的''max-width：100％;''clearfix''（現在是'headerContent'）。你可以通過在調試器中檢查'body'的寬度來看看發生了什麼。當視圖很窄時，「body」仍然會嘗試填充視圖，但由於「width：960px」元素推過身體的元素，瀏覽器會嘗試給它一個繪製位置，並獲得所需的效果看到。設置'max-width：100％'會阻止這些元素超過'body'寬度。 'headerBanner'上的另一個選項是'overflow：hidden'，但這不是最優的。 – Ouroborus

我覺得這真的解決您的問題

max-width: 960px;

來源

2016-11-13 09:20:02 Chase

這不能解決我的問題，因爲它會使全寬欄960像素寬。有一個背景div充當背景顏色的容器，它爲標題內容保存了一個960像素寬的容器。 – user3634781

這裏是您的解決方案

.clearfix { 
    width: 100%; 
    height: 100px; 
    margin: 0 auto; 
}

它不會產生滾動。

來源

2016-11-13 09:28:52

它也不會在非常寬的屏幕上看起來非常好... – junkfoodjunkie

是的它會在所有屏幕上看起來非常好。 –

^非常多。 .clearfix是一個div，它作爲要被居中的標題內容的容器。該頁面的內容是960px寬，而我希望頭部的背景在屏幕上延伸。 – user3634781

只是刪除從headerContent DIV固定寬度的CSS和你做。

來源

2016-11-13 09:42:05

我期待所有的內容都集中在屏幕中間，左邊和右邊留下空白區域。我希望將頁面的標題和子文本對齊到它將位於其中的容器的左側。 – user3634781

如果你想要中心元素（我認爲你在談論h1和h3文本），那麼簡單地把text-align：center放到他們的父元素中。他們的文本將被集中。 –

雖然我不希望它們位於頁面的中心。我想讓它們對齊到960像素寬的盒子的左側，使它們位於中間的左側，如示例頁面所示。 – user3634781

它給你水平滾動條，因爲你指定的是width（即固定寬度 - 不管屏幕寬度是多少）。

所以使用

.clearfix { 
    max-width: 960px; 
}

而不是

.clearfix { 
    width: 960px; 
}

如果你想.header不切斷，然後進行（但這並不似乎是一個很好的做法）

.header { 
    display: table; 
}

希望這有助於！

來源

2016-11-13 09:45:57

滾動條雖然不是那麼多問題。 .clearfix框位於.header類的內部，這是用於在頁面頂部製作紅色背景橫幅的內容。這是不會調整的。我根本不介意滾動條。我在反應式設計的實踐中並不擅長，所以我試圖製作靜態頁面，您可以左右滾動，但在調整大小時不會有div截止的背景。 – user3634781

@ user3634781哦！我現在知道了，我已經在'.header'中使用'dispaly：table;'更新了我的答案，但這似乎不是一個好習慣。希望這可以幫助！ –

HTML/CSS - 當內容創建水平滾動條時，如何修剪寬度：100％截斷？

回答

相關問題