Question

我正在尝试开发适用于移动设备的HTML5应用。布局是非常基本的标题，内容。

标题（红色矩形），内容（绿色矩形）是绝对div。如果高度大于屏幕，则内容必须是可滚动的。

当我尝试在橙色矩形div上设置滚动条时（而不是橙色和蓝色矩形），我的问题就开始了。

橙色矩形div必须从蓝色矩形div的末尾开始，并在屏幕的末尾结束。蓝色矩形div的高度是未知的，可以改变。

实际上正确放置了蓝色和橙色矩形div，但滚动条没有放在我想要的位置。

因此，如果我尝试在橙色矩形div上移动带有绝对位置的滚动条，它会与蓝色矩形div重叠，如果我使用相对div来包裹橙色矩形，则包装器的高度等于零原因绝对的孩子或div用完窗口并且不可注册。

如果有人有解决方案，那就太好了。

编辑1：

这是html和css代码。

html：

preg_match_all('/\b(?!home\b)\w+/i', $str, $matches);

css：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" href="lib/font-awesome/4.3.0/css/font-awesome.min.css">
        <title>YAOSWA</title>       
    </head>

    <body>
        <header class="header_no_back_button" id="header" ng-controller="HeaderCtrl" ng-show="getShowHeader()">
            <span class="header_icon pull-left ng-hide" ng-show="getShowBackButton()">
                    <a href="#home">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                </span>

            <span id="headertitle" class="pull-left ng-binding">
                    YAOSWA
                </span>

            <span class="header_icon pull-right" ng-show="getShowAboutButton()">
                    <a href="#about">
                        <i class="fa fa-info-circle"></i>
                    </a>
                </span>
            <span class="header_icon pull-right" ng-show="getShowSettingsButton()">
                    <a href="#settings">
                        <i class="fa fa-cog"></i>
                    </a>
                </span>
        </header>

        <!-- ngView:  -->
        <div class="content main_content ng-scope" id="content" ng-view="" afkl-image-container="">
            <div class="home_template ng-scope">
                <div class="view container">
                    <div ng-hide="errorOverlay()">
                        <div class="weather_header" ng-show="currentWeather.city &amp;&amp; currentWeather.country">
                            <div class="weather_header_wrapper">
                                <div>
                                    <span class="current_weather_location ng-binding">New York / US</span>
                                </div>
                                <div class="separator">
                                    <span></span>
                                </div>
                                <div class="weather_chooser">
                                    <span class="weather_type ng-binding">Hourly Weather</span>
                                    <span class="header_icon pull-left" ng-show="!isMinTab()">
                                <a ng-click="prevTab()">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                            </span>
                                    <span class="header_icon pull-right" ng-show="!isMaxTab()">
                                <a ng-click="nextTab()">
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </span>
                                    <div class="clear_both"></div>
                                </div>
                            </div>
                        </div>
                        <div class="tab_list">
                            <div class="tab ng-hide" ng-show="isActiveTab(0)">
                                ....
                            </div>

                            <div class="tab" ng-show="isActiveTab(1)">
                                <div class="weather_data_wrapper">
                                    <!-- ngRepeat: weather in hourlyWeather.list -->
                                    <div class="hourly_weather weather_data weather_803 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
                                        <div class="summary_info_hourly_weather summary_info_weather">
                                            <div class="row row_weather">
                                                <div class="col-xs-4">
                                                    <div>
                                                        <div class="hourly_weather_logo_wrapper">
                                                            <div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{&quot;offset&quot;: 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4">
                                                    <div>
                                                        <span class="hourly_weather_date_day ng-binding">Fri 31</span>
                                                        <span class="hourly_weather_date ng-binding">11:00</span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4">
                                                    <div class="vcenter">
                                                        <div class="align-left">
                                                            <span class="hourly_weather_desc ng-binding">broken clouds</span>
                                                            <span class="hourly_weather_temp ng-binding">294.2 K</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end ngRepeat: weather in hourlyWeather.list -->
                                    <div class="hourly_weather weather_data weather_804 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
                                        <div class="summary_info_hourly_weather summary_info_weather">
                                            <div class="row row_weather">
                                                <div class="col-xs-4">
                                                    <div>
                                                        <div class="hourly_weather_logo_wrapper">
                                                            <div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{&quot;offset&quot;: 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4">
                                                    <div>
                                                        <span class="hourly_weather_date_day ng-binding">Fri 31</span>
                                                        <span class="hourly_weather_date ng-binding">14:00</span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-4">
                                                    <div class="vcenter">
                                                        <div class="align-left">
                                                            <span class="hourly_weather_desc ng-binding">overcast clouds</span>
                                                            <span class="hourly_weather_temp ng-binding">297.91 K</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>                                      
                                    </div>
                                    <!-- end ngRepeat: weather in hourlyWeather.list -->
                                    ....
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script type="text/javascript" src="js/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/angular-translate.min.js"></script>
        <script type="text/javascript" src="js/lazy-image.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

Answer 1

我找不到html和css的正确答案。

但javascript可以胜任。只需要计算标题的高度，并在绝对div中添加“top”。

将绝对div定位在相对div之下

1 个答案: