使用基於百分比的高度和水平滾動在網站上的CSS絕對定位

Question

有沒有辦法讓我的元素只使用CSS使用整個文檔寬度的百分比，而不僅僅是瀏覽器寬度？

我正在創建一個水平滾動網站，其中所有元素高度和頂部對齊都是使用百分比設置的 - 這是為了適應所有瀏覽器大小並確保所有元素保持比例。

如果我嘗試使用類似的東西更改頁面上元素的左（或右）對齊方式;

#my_element {
    position: absolute;
    top: 5%;
    width: 34%
    left: 10%;
}

這將是瀏覽器窗口寬度的10％，而不是正文或html元素的實際寬度 - 這在標准垂直滾動網站中是有意義的，但對我沒有幫助。

我目前的解決方法是使用JavaScript做左側的位置;

$('#my_element').css('left', $(document).width() / 100 * 10) //Position to 10% of the page.

這有效，但是當JavaScript加載速度不夠快或者我想使用CSS動畫為各種元素設置動畫時，會引發一些問題。

Answer 1

當您使用百分比設置元素的width時，將根據該元素的父元素進行測量。 所以下面， body元素是瀏覽器的100％寬度， div.box是body元素的50％寬度。

<html>
<head>
  <style>
    div.box { width: 50% }
  </style>
</head>
<body>
  <div class="box">
</body>
</html>

您實際上可以更改body和html元素的寬度。

因此，如果您有四個“幻燈片”或“面板”，您想要100％寬度的瀏覽器，您可以給html元素400％寬度， body 100％寬度（仍然是瀏覽器的400％）因為它的父元素是html元素），每個幻燈片寬度為25％。

這是一個例子的小提琴。

我看到的唯一問題是如果你說三張幻燈片，你的html元素將是300％，每張幻燈片33.33333 ...％。 所以你不會有一個很好的干凈號碼文件。

有趣的是，你也可以搞亂任何元素，比如<head>或<script> 。 即，你可以像任何其他元素一樣顯示<script>的內容，方法是更改其默認display: none to inline或block ... fiddle

Answer 2

這確實是可能的，要與瀏覽器兼容，您需要在html和body標簽中設置寬度和高度。

樣品

html {
    width:100.01%;
    height:100.01%;
}
body {
    width:auto;
    height:auto;
}
div#normaldiv {
    border: 1px blue solid;
}
div#absolutediv {
    border: 1px red solid;
    position: absolute;
    top: 5%;
    left: 10%;
    width: 34%;
    height: 20%;
}

該示例顯示了此操作，其中iframe定義了窗口。 使用.01到正常的100％處理大多數像素問題。 通過設置html和body的值，您還可以處理IE6中存在的has layout問題。

使用基於百分比的高度和水平滾動在網站上的CSS絕對定位

問題描述

2 個解決方案

解決方案1
2 已采納 2012-11-09 12:13:42

解決方案2
0 2012-11-09 23:58:14

使用基於百分比的高度和水平滾動在網站上的CSS絕對定位

問題描述

2 個解決方案

解決方案1 2 已采納 2012-11-09 12:13:42

解決方案2 0 2012-11-09 23:58:14

解決方案1
2 已采納 2012-11-09 12:13:42

解決方案2
0 2012-11-09 23:58:14