如何根據瀏覽器高度製作`margin：top;`？

標題幾乎說明了一切。我想我的HTML main_content元素的CSS margin: top;是相對於瀏覽器窗口（這樣main_content始終停留在瀏覽器窗口的底部。我怎樣才能做到這一點（的比例）？如何根據瀏覽器高度製作`margin：top;`？

我已經試過這一點，這是行不通的。（在body {height:100vh}似乎並沒有做出任何body高度爲main_content，因爲它應該不會粘到了谷底。

body {height:100vh} 
 
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}

<div>Extra Infomation </div> 
 
<div id="main_content"> 
 
<p>here you can learn about me and my adventures</p> 
 
</div>

（不要現在這個右）如果你去我website，你會看到「瞭解我和我的冒險」標題下，即，隨着「最近的活動」一起，並低於其他的東西，那是我想要瀏覽器窗口底部的部分，最好是從頁面底部突出顯示的「瞭解我和我的冒險」部分。

來源

2016-03-06 Emmet Arries

''''''''''''''％' – Rayon

是'，但這是瀏覽器窗口寬度的百分比，而不是瀏覽器窗口高度的百分比。 –

最重要的是 - 你可以使用position：fixed;底部：10％; - https://jsfiddle.net/5xs1hct0/ - unlses你的意思是別的東西 - 做一個演示 – Tasos

給.main_content的100vh（正下方視窗）一個邊距，然後用transformY把它備份：

.main_content { 
 
    text-align: center; 
 
    padding: 20px; 
 
    margin-top: 100vh; 
 
    transform: translateY(calc(-100% - 20px)); 
 
\t background:lightblue; 
 
} 
 
.below_content{ 
 
\t margin-top:-100px; 
 
}

<div class="wrapper"> 
 
    <div>Extra Infomation </div> 
 
    <div class="main_content"> 
 
     <p>here you can learn about me and my adventures</p> 
 
    </div> 
 
</div> 
 
<div class="below_content"> 
 
    This is content below the main content 
 
</div>

來源

2016-03-06 02:17:03 symlink

非常棒！如何跨瀏覽器兼容'transform：translateY（-100％）;'？ –

此外，如果屏幕變小，即iPhone 4，那麼如果進一步下降，那麼爲什麼是這樣，我該如何修復它？ –

http：// caniuse。com /＃search = transform所有主流瀏覽器都支持2D轉換。 – symlink

這樣就把. main_content之前，如果它是一個類，並把#，如果它是一個id。

低於main_content ID的CSS代碼應該工作。

#main_content { 
    width: 100%; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

您可以嘗試在這裏https://jsfiddle.net/xsdr00dn/

來源

2016-03-06 02:17:00

如何根據瀏覽器高度製作`margin：top;`？

回答

相關問題