css - 将绝对 div 定位在相对 div 下面-6ren

css - 将绝对 div 定位在相对 div 下面

转载作者：行者123 更新时间：2023-11-28 07:27:39

我正在尝试为移动设备开发一个 HTML5 应用程序。布局是非常基本的标题和内容。

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

当我试图只在橙色矩形 div 上(而不是在橙色和蓝色矩形上)滚动条时，我的问题就开始了。

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

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

因此，如果我尝试在橙色矩形 div 上移动具有绝对定位的滚动条，它会与蓝色矩形 div 重叠，如果我使用相对 div 包裹橙色矩形，则包装器的高度等于零，因为绝对子元素或div 超出窗口并且不可滚动。

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

编辑 1:

这是html和css代码。

html :

<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>

CSS :

@font-face {
    font-family: 'UbuntuM'; /*a name to be used later*/
    src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-M.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'UbuntuR'; /*a name to be used later*/
    src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-R.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'ubuntu-light'; /*a name to be used later*/
    src: url('../fonts/ubuntu-font-family/0.80/ubuntu-light.woff'); /*URL to font*/
}



* {
    font-size:1em;
    box-sizing: border-box;
}

*:after, *:before {
    box-sizing: border-box;
}
html,body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    color:#5c5c5c;
    font-family: 'UbuntuR'; 
}

.clear_both {
    clear:both;
}
.mediumfont {
    font-family: 'UbuntuM'; 
}


header {
    box-sizing: border-box;
    height:60px;
    line-height:45px;
    text-align:center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    background-color:#ecedec;
    color:#5c5c5c;
    padding:5px;
    border-bottom: 10px solid #d7d7d7;
}

#headertitle,
.weather_header {
    font-family: 'ubuntu-light';    
    padding-left: 10px;
    font-size:20px;
    line-height:42px;
}
.header_icon > a{
  font-size: 25px;
  padding: 0 7px;
  color: #5c5c5c;
}

#content {
    box-sizing: border-box;
    position: absolute;
    top:60px;
    bottom:0px;
    left:0;
    right:0;
    width:100%;
    background-color:#ecedec;
    color:#000000;
    overflow-y: auto;
    padding:5px;
}

#content .tab {
    overflow: hidden;
    position:relative;
    margin:5px;
}
#content .tab_list {
    /*
    position: absolute;
    bottom: 0;
    top: 0px;
    left: 0;
    right: 0;   
    */
}

#content .tab,
.weather_data_wrapper {
    /*position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    right: 0;
    left: 0;
    */
}

/*
footer {
    height:30px;
    line-height:30px;
    text-align:center;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    background-color:red;
    padding:5px;
}
*/


.about_logo_wrapper {
    text-align: center;
    margin-top:10px;
}

.about_logo_wrapper > img {
    width:33%;
    height:auto;
    display:inline-block;
}

.about_text_wrapper {
    text-align:center;
}

.about_title {
  display: block;
  margin: 10px;
  font-size: 1.5em;
  margin-bottom: 2px;
}

.about_template ul {
    list-style: none;
    padding:0;
}
.about_template ul li{
    margin:5px;
}

.about_desc {
    margin-top:35px 0px;
}


#errorOverlay,
#loadingOverlay {
    background-color:rgba(255, 255, 255, 0.5);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:100
}

.error_overlay_wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    width:100%;
    height:10%;
    margin-left: -50%; /*half width*/
    margin-top: -5%; /*half height*/
}

.loading_overlay_wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    width:100px;
    height:100px;
    margin-left: -50px; /*half width*/
    margin-top: -50px; /*half height*/
}

img {
    max-width:100%;
    max-height:100%;
}
/*
.hourly_weather_date_day,
.daily_weather_date_day,
.hourly_weather_desc,
.daily_weather_desc,
.detail_info_weather
*/
.hourly_weather_desc,
.daily_weather_desc {
    font-size:0.75em;
}
.weather_data,
.detail_info_weather,
.summary_info_weather {
    color: #FFFFFF; 
}

.hourly_weather > .detail_info_weather,
.daily_weather > .detail_info_weather
{
    display:none;
}
.hourly_weather.show_weather_detail > .detail_info_weather,
.daily_weather.show_weather_detail > .detail_info_weather
{
    display:block;
}

.weather_data {
    padding: 5px;
}

.hourly_weather.weather_data,
.daily_weather.weather_data
{
    margin-bottom:5px;
}
.current_weather_desc,
.hourly_weather_desc,
.daily_weather_desc  {
    text-transform: capitalize; 
}

.detail_temp_min_max_group {
    display:inline-block;
}
.detail_icon {
    height:1em; 
}

.detail_icon_bkg {
    background-size: 18px;
    padding-left:20px;
    background-repeat: no-repeat;
    background-position: left center;   
}

.detail_icon_sunrise_bkg {
    background-image:url(/img/details_icon/icon_sunrise.svg);
}
.detail_icon_sunset_bkg {
    background-image:url(/img/details_icon/icon_sunset.svg);
}
.detail_icon_temp_bkg {
    background-image:url(/img/details_icon/icon_temp.svg);
}
.detail_icon_temp_min_max_bkg {
    background-image:url(/img/details_icon/icon_temp_min_max.svg);  
}
.detail_icon_pressure_bkg {
    background-image:url(/img/details_icon/icon_pressure.svg);
}
.detail_icon_humidity_bkg {
    background-image:url(/img/details_icon/icon_humidity.svg);
}
.detail_icon_cloud_bkg {
    background-image:url(/img/details_icon/icon_cloud.svg);
}
.detail_icon_rain_bkg {
    background-image:url(/img/details_icon/icon_rain.svg);
}
.detail_icon_wind_orientation_bkg {
    background-image:url(/img/details_icon/icon_wind_orientation.svg);
}
.detail_icon_wind_speed_bkg {
    background-image:url(/img/details_icon/icon_wind_speed.svg);
}

.summary_info_current_weather {
    text-align:center;
}
.current_weather_logo {
    width: 50%;
    display:inline-block;
}


/*black*/
.weather_data.weather_200,
.weather_data.weather_201,
.weather_data.weather_202,
.weather_data.weather_210,
.weather_data.weather_211,
.weather_data.weather_212,
.weather_data.weather_221,
.weather_data.weather_230,
.weather_data.weather_231,
.weather_data.weather_232,
.weather_data.weather_900,
.weather_data.weather_901,
.weather_data.weather_902,
.weather_data.weather_903,
.weather_data.weather_904,
.weather_data.weather_905,      
.weather_data.weather_906,
.weather_data.weather_950,
.weather_data.weather_951,
.weather_data.weather_952,
.weather_data.weather_953,
.weather_data.weather_954,
.weather_data.weather_955,
.weather_data.weather_956,
.weather_data.weather_957,
.weather_data.weather_958,
.weather_data.weather_959,
.weather_data.weather_960,
.weather_data.weather_961,
.weather_data.weather_962
{
    background-color:#000000;
}

/*blue*/
.weather_data.weather_300,
.weather_data.weather_301,
.weather_data.weather_302,
.weather_data.weather_310,
.weather_data.weather_311,
.weather_data.weather_312,
.weather_data.weather_321,
.weather_data.weather_500,
.weather_data.weather_501,
.weather_data.weather_502,
.weather_data.weather_503,
.weather_data.weather_504,
.weather_data.weather_511,
.weather_data.weather_520,
.weather_data.weather_521,
.weather_data.weather_522,
.weather_data.weather_531,
.weather_data.weather_600,
.weather_data.weather_601,
.weather_data.weather_602,
.weather_data.weather_611,
.weather_data.weather_621
{
    background-color:#55AAFF;
}

/*gray*/
.weather_data.weather_701,
.weather_data.weather_711,
.weather_data.weather_721,
.weather_data.weather_731,
.weather_data.weather_741,
.weather_data.weather_751,
.weather_data.weather_761,
.weather_data.weather_762,
.weather_data.weather_771,
.weather_data.weather_781,
.weather_data.weather_802,
.weather_data.weather_803,
.weather_data.weather_804
{
    background-color:#808080;
}



/*yellow*/
.weather_data.weather_800,
.weather_data.weather_801
{
    background-color:#E0B000;
}
/*night*/
.weather_data.night {
    background-color:#41403b;
}

.daily_weather_logo,
.hourly_weather_logo {
    width: 100px;
    display:inline-block;
}

.weather_header {
    padding:0px;
    position: relative;
}
.weather_header_wrapper {
    margin:5px;
    background-color:#d7d7d7;
}
.weather_header_wrapper > div {
    text-align:center;
}

.row_weather > div {
    text-align:center;
}

.row_weather {
    display: table;
    width:100%;
    table-layout: fixed;
}
.row_weather > div span {
    display: inline-block;
    width:100%;
}

.row_weather [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
}


.align-left {
    text-align:left;
}

.weather_data .separator
{
    margin-top: 10px;
    padding-bottom: 10px;
}

.separator {
    text-align:center;
    line-height: 1px;
    height: 1px;
    position: relative;
    background-color:transparent;
}

.separator > span {
    display: inline-block;
    border-top: 1px solid #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10%;
    left: 10%;
}

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

.weather_chooser {
    position:relative;
}


.container-centered {
    height: 100%;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container-centered:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.elem-centered {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

最佳答案

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

但 javascript 可以完成这项工作。只需要计算header的高度，在绝对div上加一个“top”就可以了。

关于css - 将绝对 div 定位在相对 div 下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31729897/

文章推荐：按住键时 C++ SDL 帧率下降

文章推荐： javascript - </script> 标签放置在错误的位置

文章推荐：我的类中的 C++ 运行时错误

html - 位置相对/绝对
我想要做的是在每个框的蓝色标题之后获取红色文本。看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。你知道为什么即使我将 positi
css - 绝对/相对位置尝试强制滚动条到页面顶部
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
html - 绝对/相对定位问题
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
html - 将标题按钮居中而不使其成为静态/绝对
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
css - “绝对”位置元素在放置在父级范围之外时不显示？
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
html - CSS定位相对于固定/绝对
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
css - 绝对/相对定位布局溢出
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。以下是分解为基本组成部分的方法: SOME HEADER
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
haskell - protected 绝对/相对文件路径类型
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
Java 数据库 - 绝对 URL
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
python - Django 绝对 url
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数它给出的输出类
jquery - Div 水平居中 NO 绝对
我有一个小问题。我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
javascript - IE8 绝对/相对定位元素不显示
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
css - 绝对 td 的匹配高度
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。如果它不是绝对定位的，那么这将迫使同一行中
css - 绝对 div 居中和响应？
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
css - 如何设置Div(绝对)宽度100%
当它的位置绝对时，我试图使一个框宽度为 100%？下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
javascript - 绝对 HTML 元素和浏览器滚动
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
css - 绝对 Div 填充窗口的剩余部分
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。我知道这听起来很菜
javascript - 绝对 .position() 值
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。有时候，当我请求某个对象的.posit

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 将绝对 div 定位在相对 div 下面