Question

所以我在这里有这个代码：http://jsfiddle.net/nUwgX/底部有一个小箭头。我想要发生的事情是，当窗口调整大小是为了保持箭头从屏幕底部大约15％，但我不知道我是怎么做到的。任何帮助将不胜感激。

HTML ：

<div class = "container">

    <div class = "top-wrapper">
        <a id = "name" href = "#">Bigfoot Games</a>
    </div>
    <div class = "bottom-wrapper">
        <p>Content</p>
    </div>

</div>

CSS ：

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0;
    text-align: center;
}

.top-wrapper {
    position: relative;
    background: #0f0f0f;
    height: auto;
    height: 100%;
    max-height: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: table;            
}

.top-wrapper:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(15, 15, 15, 0);
    border-top-color: #0f0f0f;
    border-width: 30px;
    margin-left: -30px;
}

#name {
    display: table-cell;   
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    color: white;
    font-size: 80px;
    text-decoration: none;
    margin: auto 0;
}

.bottom-wrapper {
    background: white;
    margin: 0 auto;
    padding: 20px;
}

编辑：好的，所以说我想要大约15％以上的箭头不是我的意思！哈！我的意思是，我希望.top-wrapper为100％，以便它覆盖整个窗口，然后向下滚动以查看.bottom-wrapper - 但是当屏幕调整大小时（除了我的1920 x 1080分辨率））箭头隐藏在视线之外，我想要的是无论分辨率如何都可以看到箭头，并且具有1920 x 1080分辨率的外观（在填充/距离方面）。

Answer 1

将.top-wrapper的css更改为仅占85％，底部的“箭头”占15％。

.top-wrapper {
    ...
    height: 85%;
    ...
}

见jsfiddle：

http://jsfiddle.net/nUwgX/1/

Answer 2

将您的.top-wrapper height更改为85%

我在jsfiddle中改变了它，它在屏幕调整大小时保持不变。如果那不是你想要的，请详细说明问题。

祝你好运！

Answer 3

如果您想将底部包装物保持在底部固定位置......

将您的.bottom-wrapper课程替换为以下

.bottom-wrapper {
    position:fixed;
    bottom: 0px;
    height: 15%;
    width: 100%;
    background-color: white;
    margin: 0 auto;
}
.bottom-wrapper p{
    padding-top: 20px;
}

然后将.top-wrapper:after更改为.bottom-wrapper:before

如何垂直压扁div并将元素保持在屏幕下方100％以下

3 个答案: