添加圖標將底部DIV部分

這裏的事情。我有一個網頁拆分爲2個部分（intro和main）添加圖標將底部DIV部分

Webpage

的intro部分一直延伸到100基於與CSS的瀏覽器高度：

#intro { 
    height: 100vh; 
}

我要與將在intro div的底部放置不管哪個屏幕尺寸的href添加箭頭進入頁面。

你有什麼想法該怎麼辦？

謝謝！

來源

2015-06-23 Katarzius

#intro { 
    ... 
    position: relative; /* or absolute, as appropriate */ 
} 
#down_arrow { 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    margin-left: -25px; /* half the element's width */ 
}

這假定標記類似於以下內容。將來，請在您的問題中提供您的標記。

<div id="intro"> 
    <div id="down_arrow"> ... </div> 
</div>

來源

2015-06-23 14:35:58 isherwood

感謝。這正是我需要的。 – Katarzius

設置position:relative到#intro元件和position:absolute的箭頭。

也給出了底部和左側規則：

#arrow { 
    width:40px; /* sample width - set as you wish */ 
    position:absolute; 
    bottom:10px; 
    left:50%; 
    margin-left:-20px; /* important: set half of the width (centers the div) */ 
}

來源

2015-06-23 14:36:28 kapantzak

-1

.section2 { 
    position:fixed; 
    bottom:0; 
} 
#intro { 
    position: relative; 
}

添加適當的風格，使其在屏幕的中央。

來源

2015-06-23 14:37:06

-1

放置介紹容器和使用裏面的箭頭：

.arrow{ 
    bottom: 0px; 
}

，你可能還需要反覆折騰position屬性爲好，但是這應該給你你需要什麼。希望這可以幫助！

來源

2015-06-23 14:37:08

margin-top:90vh

：D和我需要寫一些文本，所以stackoverflow知道我不是垃圾郵件。

Rich homie quan是個不錯的說唱歌手。我認爲現在已經達到了極限。

來源

2015-06-23 14:39:55 HVSHBROWN

你的意思是這樣Fiddle 我使用前奏元素的定位爲relative並根據需要設置這個viewportheight。因此，如果我將箭頭位置設置爲absolute它將保留在介紹元素內。

.arrow{ 
width: 50px; 
position: absolute; 
bottom: 0; 
left: 50%; 
margin-left: -25px; 
}

來源

2015-06-23 14:46:37 Griva

這正是這種情況:) – Katarzius

使用Flexbox的（demo）：

<div class="intro"> 
    <div class="nav"></div> 
    <div class="link-container"> 
     <a>Arrow</a> 
    </div> 
</div> 
<div class="main"></div>

CSS：

.intro { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    background: blue; 
} 

.intro > .link-container { 
    position: absolute; 
    bottom: 20px; 
    text-align: center; 
    width: 100%; 
} 

...

來源

2015-06-23 14:52:12

添加圖標將底部DIV部分

回答

相關問題