html - 任何尺寸底部附近的 float 条

Question

我正在创建一个页面，底部有一个 float 在背景上的栏。这将在手机上进行，因此尺寸会发生变化。如果屏幕尺寸太小，我需要底部栏向上移动(即它会隐藏我目前的操作方式)。需要澄清的是，带箭头的栏可以正常工作，需要移动的是其中不透明的文本栏。

目前它看起来像:

工作正常，但是当调整浏览器大小时会发生以下情况:

代码如下:

<div class="home_slide2" id="slide2" name="slide2" ng-swipe-right="go('/slideone')" ng-swipe-left="go('/slidethree')">
    <div class="home_bar">text in the bar
    <div id="submit" class="intro_btn" name="submit">Join</div>
    </div>
        </div>
    <div class="navbar  navbar-default navbar-fixed-bottom navbar-inverse">
    <div class=" footerbar no-gutter">
        <div class="col-xs-2"><img src="images/slider_prev.png" ng-click="go('/slideone')"  class="navbar-arrow" /></div>
        <div class="col-xs-8">
            <center>
            <img src="images/invisible_dot.png"  style="display:inline-block; width:100%; max-width:15px;">
            <img src="images/visible_dot.png" style="display:inline-block; width:100%; max-width:15px;">
            <img src="images/invisible_dot.png"  style="display:inline-block; width:100%; max-width:15px;">
            </center>
        </div>
        <div class="col-xs-2"><img src="images/slider_next.png" ng-click="go('/slidethree')" class="pull-right navbar-arrow" /></div>
    </div>

CSS:

.home_bar{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px 50px;
    text-align: left;
    height: 200px;
    top: 54%;
}


.home_slide2{
   background: url(../images/slide2.jpg) no-repeat scroll 5% center / cover #fff;
    height: 600px;
    top: 59px;
    position: fixed;
    width: 100%;    
}

Answer 1

如果我理解正确，这些更改应该:

• 将 transparnet div 固定在底部
• 设置最小高度
• 如果内容变得大于您的最小高度，则增长。

CSS

.home_slide2{
    position:relative; /*add relative to home_bar's container.*/
}
.home_bar{
    position:fixed; /* fix to bottom */
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px 50px;
    text-align: left;
    height: auto; /* grow UPWARD if content larger than min height */
    min-height:200px; /* set min height */
    bottom: 0; /* fix to bottom */
    width:100%; /* Fill width */
}

DEMO