个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试为移动设备开发一个 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 && 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="{"offset": 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="{"offset": 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/
26
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SS
我有一个布局，它有一个 EditText，当用户输入时应该在它下面显示建议。我以编程方式创建了一个 RecyclerView，它应该在 EditText 下面显示建议项目。但是当用户输入时它不显示 R
我正在尝试将 下面各三 s(一个 每三个 s)，但是我得到了意想不到的结果。我得出的结论是我必须放一个 低于三分之一 ，但是当我这样做时，它的位置不正确(请参阅演示)。 我正在使用这个 Djan
我知道这个问题已经被问过好几次了，我已经尝试了其他答案中建议的所有方法，但似乎没有任何方法可以使我的 div 位于需要的位置。奇怪的是，一夜之间我的一个 div 想要低于前一个 div。开始时是 fl
好的，我明白了，当离开 .wrapper 时，带有 overflow:hidden 的元素 .wrapper 的所有子元素都会被自然切割的边界框。但这里我只应用了overflow:auto。 是关于下
我有一个元素 The result is ... Test_then 类如下所示: .Test_then::before { content: 'Then'; } 我的目标是让 (The resu
我有一个下拉菜单，它适用于除 IE6 和 IE7 之外的所有内容。 Here it is in the Safari/Firefox browsers Here is how it looks in
我尝试从支持库 13 实现最新的抽屉布局。使用以下代码，抽屉始终显示在 gridview 下方。即使我尝试调用 bringToFront() 仍然无法正常工作。能帮忙看看是什么问题吗？谢谢。 acti
这个问题在这里已经有了答案: using a div to blur an image behind it? [duplicate] (2 个答案) 关闭 7 年前。 我目前正在 Photoshop
我正在阅读一本有关 Java 的书，并发现了以下源代码。 //This example demonstrates how to search multiple occurences of a sear
我想让一个新的/隐藏的 div 从另一个 div 下面滑下来。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素(从下方滑出)。这个的形式部分对我的问题并不重要，所以我只让第
我正在制作一种标签栏，其下方有一个指示器，指示选择了哪个标签。我的 View 层次结构非常简单: --------------------------------- |-------------
我什至不知道如何描述这一点，我还在学习，而且还是个新手。 我有一个用于容器的 div。 里面有一个用于菜单的 div 和一个用于内容的 div，两者并排向左浮动。 对于大多数普通内容，它们并排放置。然
我想要一个与浏览器窗口高度相同的 div，以及位于该 div 下方的另一个 div。 我所有的尝试都未能堆叠 div，而是将它们重叠。 我的元素正在尝试的一种天真的实现。 这是我的 fiddle
我正在尝试根据 this codepen 设置联系表单的样式并且 float 表单在其父 div 下面而不是在其中时遇到问题。我试过添加一个 clearfix，但没有成功。我也没有运气就把溢出弄得一团
我是网络开发新手，需要一些帮助来解决这个简单的问题。调整大小时，菜单项会移动到名称下方，有人能告诉我哪里搞砸了吗？ 我一直在阅读其他一些解决方案并了解想法，但就是找不到我的错误。 > A
我正在尝试为移动设备开发一个 HTML5 应用程序。布局是非常基本的标题和内容。 标题(红色矩形)、内容(绿色矩形)是绝对 div。如果高度大于屏幕，则内容必须是可滚动的。 当我试图只在橙色矩形 di
我正在尝试将这个 ul 移动到 div 下面，我什至不确定这是否也是完美的方法， 这是代码， HTML User 1
我的处境很复杂。首先，我有两列，当屏幕变小时，它们会在彼此下面。我的问题是在其中一列中我有一个相对的 div。我想要另一个 div 直接在它下面，但它一直与第一个 div 重叠。 这是我的代码:
例如，如果我使用了对齐，如何将一张 table 放在另一张 table 下面。 center_table left_table desired_table
我是一名优秀的程序员,十分优秀！