爲什麼水平滾動條遠遠超出內容？

我正在建立一個博客，並有一個大的標題圖像，目標是填充屏幕的頂部（除非在監視器上大於1500px） - 但滾動條遠遠超出標題內容並顯示空白區域。爲什麼水平滾動條遠遠超出內容？

在Ipad上查看時，它會縮小並顯示內容側的額外空間。爲什麼寬度比圖像大得多？

這裏是網站：

下面是HTML和CSS：

<?php wp_head(); ?> 
</head> 

<div id="container" class="group"> 
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div> 

div.inner img { position: relative; left:-50%; } 
div.outer {width: 900px; margin: 0 auto; overflow: visible;} 
div.inner {display: inline-block; position:relative; right: -50%;}

此代碼工作居中超過容器的頭，我的希望是，它會永遠填補頂部屏幕除非顯示器太大。任何想法爲什麼它會在圖像之外創建額外的滾動空間？

謝謝。

來源

2012-09-04 TheImaginative

div是否必須在容器內？ –

我會將它們從容器中取出。在標記中移動div.container上方的div.outer，移除div.outer，div.inner的所有CSS，然後添加一個text-align：center;把div.inner徹底刪除。

來源

2012-09-04 14:16:18

試試這個

#container { 
width: 911px; 
margin: 0 auto; 
position: relative; 
padding: 0 0 0 140px; 
overflow: hidden; 
}

來源

2012-09-04 14:05:25 Carlos

這是故意的。我想讓圖像變得很長 - 如果我將容器放在左邊對齊的容器中，並且不會像現在顯示的那樣將圖像居中。 – TheImaginative

我已更新我的答案請檢查並回復 – Carlos

這是一個與class="inner"，佔用空間的元素。它從它內部的圖像中獲取它的大小，但是然後使用相對定位將圖像顯示在元素的左側。

如果要使用該方法居中放置元素，請將div放在所有區域中，其中包含overflow: hidden;且沒有設置寬度，以便它使用默認width: auto，這將使其佔用所有可用寬度。

來源

2012-09-04 14:09:01 Guffa

http://jsfiddle.net/pWDrD/

你會看到，如果你增加了小提琴盒的寬度，然後將圖像，而無需任何滾動條會自動增加寬度。你明白我是怎麼做到的？讓我知道。如果不是，我會解釋。簡單地說，當你想要一個圖像到100％的顯示器，然後你需要把它放入一個寬度爲100％，邊距自動，而不是固定寬度和根本沒有位置的容器。

來源

2012-09-04 14:10:55 AnAspiringCanadian

我不認爲他們想要圖像跨越100％寬度。我想他們想知道爲什麼div.inner會佔據右邊的空間。 –

我試過了，但是在圖像上出現了扭曲或變得高挑的問題。我想要一個350像素的固定高度，但不希望圖片扭曲。 – TheImaginative

我找不到div.inner，而且，在這種情況下圖像扭曲意味着什麼？我提供的小提琴中的圖像始終是固定的高度（300px），並且沒有滾動條？ – AnAspiringCanadian

爲什麼水平滾動條遠遠超出內容？

回答

相關問題