Question

目标：我正在尝试创建一个全屏幕div，它会自动调整到所有屏幕高度（例如：http://full-vert.webflow.com/）。

问题：当它被绑定到底部并且正在调整屏幕高度时，我正在与子div通过它的父div的顶部进行斗争。有没有办法让这个子div停止缩放页面的高度？

HTML

<div class="container">

    <div class="bottom">

        <h1>Hi!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

</div>

CSS

.container {
    background-color: #f9f9f9;
    width: 100%;
    height:150px;
    position: relative;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

这是一个jsfiddle：http://jsfiddle.net/Lboyrqnc/
在.container {height：200px;}上尝试不同的值。例如。 50px到150px，你会看到我的观点 PS。我正在使用身高：100vh。

编辑：要真正展示我的意思，请尝试以下操作：将.container高度设置为100vh（这是当前浏览器窗口高度的100％），然后进入浏览器窗口模式并向上和向下拖动窗口的底部，您将看到h1将如何过去（在这种情况下）它的父div。

Answer 1

如果添加

怎么办？

top: 0;

到.bottom类？

Answer 2

将最大高度添加到

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height:200px;
}

它有效

小提琴http://jsfiddle.net/harshdand/h84jfn3o/

HTML / CSS：当屏幕高度变小时，内部，底部绑定div会越过顶部

2 个答案: