調整包裝css以遵循響應式設計

我開始我的web項目嘗試遵循響應式設計規則。爲此，我將所有維度表示爲百分比。用div和圖片填充我的起始頁很好。我的css文件開始像調整包裝css以遵循響應式設計

body, html { 
height:100%; 
width:100%; 
} 
#wrapper{ 
    position:relative; 
    width:100%; 
    height:100%; 
}

但是，當我的網頁比視達到的高度大一點，它停止了擴大和我的新增加不出來。我讀過高度百分比是指容器高度，你必須以像素爲單位定義第一個父母的高度，以便孩子可以達到他們的高度。我搜索了幾天，閱讀關於「溢出：隱藏」，「高度：自動」的建議，順便說一下，在我的情況下不起作用，使用引導等等，但主要問題仍然存在：對上述css提供了一個封裝器，當按照響應式設計的方式添加新元素時，它可以通過高度自動擴展？在此先感謝

來源

2017-10-18 Johnk Overlord

你試過最小高度，而不是高度？它應該讓你設置一個至少100％的高度，但是如果你的內容比視口高，這個高度會隨着你的內容而擴大。 – delinear

不工作。它縮小了我的標題 –

可能值得將您正在處理的內容添加到https://jsfiddle.net/，以便我們可以更清楚地看到問題所在，並提供一些幫助。 – delinear

兩個選項：

取出100％的高度。你並不需要它。
添加overflow: scroll;：

包裝{ 位置：相對; 溢出：滾動; 寬度：100％; 身高：100％; }

編輯補充：

變化高度最小高度作爲註釋到OP建議。

你的代碼發生了什麼事情，你告訴#wrapper div和屏幕一樣高，並且沒有更高。如果它和屏幕一樣高，就沒有什麼可以向下滾動的;你看到了整個事情。從技術上講，內容繼續（溢出）低於div本身，但它的屏幕外。通過設置溢出滾動，告訴瀏覽器不讓它溢出，而是滾動。看到這裏：https://www.w3schools.com/cssref/pr_pos_overflow.asp

但是，最終，我可能會完全離開高度，除非我有一個真正的具體理由來包括它。

body, html { 
    width: 100%; 
    height:100%; 
} 
#wrapper{ 
    color: black; 
    background-color: yellow; 
    position:relative; 
    width:100%; 
}

編輯補充：我想你將不得不給我們一些示例代碼，因爲你清楚地給我們的信息是不是我們需要的一切。你使用的是什麼瀏覽器？

這工作得很好：

body, html { 
 
    width: 100%; 
 
    height:100%; 
 
} 
 
#wrapper{ 
 
    color: black; 
 
    background-color: yellow; 
 
    position:relative; 
 
    width:100%; 
 
}

<html> 
 
<body> 
 
    <div id="wrapper"> 
 
    <h1>Hello There</h1> 
 
    <p>Lorem ipsum something sumthing fnord. Adipiscing at invidunt et eos ut te exerci possim eirmod vel ipsum lorem kasd. Veniam labore labore vero sit nulla lorem et rebum et voluptua duis clita sit. Tempor enim lorem placerat erat feugiat et ut tempor. Sit delenit gubergren qui vero eirmod tempor facilisis. Sadipscing imperdiet aliquam dolor vero. Nulla aliquyam et dolore sit aliquam vel stet. Amet rebum lobortis amet. Lorem diam eirmod ipsum. Augue dolores sadipscing rebum eos dolor praesent. Takimata justo labore. Voluptua dolore sit luptatum invidunt justo justo diam clita lobortis dolor labore. Te soluta eos dolor sit lorem nostrud accusam luptatum euismod dolore sit. Ipsum veniam imperdiet dolor laoreet consetetur voluptua diam iusto elitr consetetur duo. Est justo elitr facilisis gubergren dolore tincidunt stet dolore et clita tempor sanctus ea. Dolores eum dolore clita erat accusam et eos clita at. Sea sea esse tempor ullamcorper lorem. Sit dolore dolor erat tempor qui elitr gubergren dolor sit. Sea soluta illum sed ipsum zzril erat gubergren.</p> 
 
    <p>Et molestie quis aliquyam sanctus magna takimata lorem et consetetur sadipscing et. Gubergren et dolor tempor ullamcorper eos accusam et justo. Tincidunt dolor velit amet aliquyam sanctus takimata sea duis accusam sed ea et diam et option aliquyam et magna.</p> 
 
    <p>Accusam consetetur sed suscipit amet sit vero in duis clita amet. Et invidunt erat enim invidunt erat lorem duo ut euismod clita. Facilisis illum ut velit sanctus sadipscing diam dolore sadipscing veniam accusam. Kasd lorem sit esse. Invidunt dolor elitr duis ipsum sit sed ipsum dolore justo. No diam sed tincidunt dolore ex aliquyam. Sadipscing lorem adipiscing qui quod dolor lorem lorem veniam accusam et et. Te et amet in. Et vero illum dolores lorem at vero option takimata. Accusam eum eros nonumy at lorem iriure feugait dolor labore duis amet ipsum. Kasd consectetuer kasd diam gubergren autem takimata diam sit dolore praesent et consetetur id erat tation consetetur sadipscing.</p> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-10-18 14:51:08

不是。我添加了新的高度：50％和黑色背景顏色，所以我可以檢查高度擴展，但根本沒有顯示 –

請參閱上面的修改。添加了一個代碼示例。我認爲你必須給我們一些示例代碼，因爲你明確給我們提供的信息並不是解決問題所需的一切。 –

Ohhhh ..我的上帝......問題是關閉div標記中缺少的斜槓。我的道歉和感謝您的努力 –

調整包裝css以遵循響應式設計

回答

相關問題